- ベストアンサー
ブロックレベル要素内ブロックレベル要素のmargin-topが効かない
<html><head><style> *{ margin:0; paddgin:0; border:none; } div#wrap{ background:#BBB; width:600px; height:900px; margin:30px auto; } div#header{ background:#999; width:150px; height:60px; margin:30px; } </style></head><body> <div id="wrap"> <div id="header"> </div> </div> </body></html> 例えばこの用な場合で、divの中にdivが入っている場合など…中に入っているdiv要素のmargin-topが効きません。原因がよくわらないのですが、どのような条件の時にmargin-topは効かなくなるのでしょうか？また解決策はどのようなものがあるでしょうか？このようなケースでmargin-topが効かなくなったのが二度目でどうしても気になったので質問させていただきました。よろしくお願いします。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 中に入っているdiv要素のmargin-topが効きません margin の相殺 内側の margin が外側の margin に吸収されている状態です。 cf.) http://www.w3.org/TR/2006/WD-CSS21-20061106/box.html 外側のボックスに padding 又は border を付けることで解決できます。 その他の例、バグ等もありますので、調べてみてください。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
paddin ではなくて、paddingだよ。 テストするときは、すべてのborderを1px solid redなどと設定しておくと見つけやすい。 テキストエディタで、チェックするのが簡単ですけど。 あと、background は一括指定なので色しか決めないときは background-color とする。backgroundとするなら、solid 1px redのようにすべて指定しておくほうが、思わぬ継承で混乱しなくてすむ。
お礼
paddingでしたね。思わぬスペルミスでした…すみません。 とりあえず、backgroundはbackground-colorに変更しました、そしてborderをつけたら何故か解決…。NO2の方が回答して下さいましたが、marginの相殺というやつみたいですね。 大変参考になりました。どうもありがとうございました。
お礼
marginの相殺ですか。なるほど。勉強になりました。 参考URLの中は英語で全くチンプンカンプンだったのですが、翻訳しつつ少し目と通してみたいと思います。 ちなみにバグがあるのは主にIEだと思っていたのですが、これに関してはIEではちゃんとmarginが効いて、ChromeやFirefoxだと相殺されてしまうのですね。 どうもありがとうございました。