- 締切済み
マージン部分の表示がうまくいかない
素朴な質問です。 キミドリのDIVの中にテキストが入る「A（青）」のDIVが入れ子になっています。 テキスト量に応じてそれぞれ縦のサイズを可変させます。 親のキミドリを基準に上下から50pxのマージンを取る意図で「A（青）」に“margin-top:50px”“margin- bottom:50px”を設定しているのですが、Safari3、Firefox3では上下50pxのマージン部分がキミドリで表示されません。 おそらく表示されないのが正しいCSSの仕様通りだとは思うのですが、マージン部分もキミドリで表示したい場合ははどのようにソースを書けばいいでしょうか？ 親のキミドリにpaddingを設定するしかないのでしょうか？ 以下ソースです。 ご教示よろしくお願いします。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>サンプル</title> </head> <body style="margin:0px;padding:0px;"> <div style="background:#0F0;width:220px;"> <div style="width:100px;background:#00F;margin-top:50px;margin-bottom:50px; margin-left:10px;">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div> </div> </html> </body>
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- abril
- ベストアンサー率69% (388/560)
質問文だけ読んでいると、何故「親のキミドリにpaddingを設定する」方法が採れないのか理由がわかりませんが…子の青の前後には要素も入らない様ですし。 とりあえず、”子の青の方の上下”に”親の黄緑と同色のボーダー”を50pxの太さで引けば、見た目的には解決すると思いますが。左右方向ではなく上下方向にボーダーを追加するだけなので「ボーダーもマージンが広がってしまうのは同じ」という意味もちょっとわかりません。 以下、上記の考え方に基づくサンプルです。 --------------------------------------------------------------------- 【サンプル】 --------------------------------------------------------------------- <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> <style type="text/css"> <!-- body { margin: 0; padding: 0; } div.parent { width: 220px; background: #0f0; } div.child { width: 100px; background: #00f; border-top: solid 50px #0f0; border-bottom: solid 50px #0f0; margin-left: 10px; } --> </style> </head> <body> <div class="parent"> <div class="child">データ</div> </div> </body> </html> --------------------------------------------------------------------- 上記で不具合ある様でしたら具体的い補足して下さい。
- fujillin
- ベストアンサー率61% (1594/2576)
外側のdivに要素を入れると表示されませんか？ <div style="background:#0F0;width:220px;"> * <div style="width:100px;background:#00F;margin-top:50px;margin-bottom:50px; margin-left:10px;">あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお</div> * </div> あるいは外側に同色のボーダーを設定するとか <div style="background:#0F0;width:220px;border:1px solid #0F0;">
補足
ありがとうございます。 要素を入れると背景が表示されるのは知っているのですが、そうするとその要素からのマージンになってしまいますよね。結果的にマージンが広くなってしまいます。 ボーダーもマージンが広がってしまうのは同じですよね。