ブロックレベル要素内ブロックレベル要素のmargin-topが効かない

解決済

質問者：3104kita
質問日時：2010/01/11 04:26
回答数：2件

<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件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yuu_x
回答日時：2010/01/11 11:04

> 中に入っているdiv要素のmargin-topが効きません

margin の相殺

内側の margin が外側の margin に吸収されている状態です。

cf.) http://www.w3.org/TR/2006/WD-CSS21-20061106/box. …

外側のボックスに padding 又は border を付けることで解決できます。

その他の例、バグ等もありますので、調べてみてください。

- 0
- 件

通報する

この回答へのお礼

marginの相殺ですか。なるほど。勉強になりました。
参考URLの中は英語で全くチンプンカンプンだったのですが、翻訳しつつ少し目と通してみたいと思います。
ちなみにバグがあるのは主にIEだと思っていたのですが、これに関してはIEではちゃんとmarginが効いて、ChromeやFirefoxだと相殺されてしまうのですね。

どうもありがとうございました。

通報する

お礼日時：2010/01/11 22:20

No.1

回答者： ORUKA1951
回答日時：2010/01/11 09:54

paddin ではなくて、paddingだよ。

　テストするときは、すべてのborderを1px solid redなどと設定しておくと見つけやすい。
　テキストエディタで、チェックするのが簡単ですけど。

あと、background は一括指定なので色しか決めないときは
background-color とする。backgroundとするなら、solid 1px redのようにすべて指定しておくほうが、思わぬ継承で混乱しなくてすむ。

- 0
- 件

通報する

この回答へのお礼

paddingでしたね。思わぬスペルミスでした…すみません。

とりあえず、backgroundはbackground-colorに変更しました、そしてborderをつけたら何故か解決…。NO2の方が回答して下さいましたが、marginの相殺というやつみたいですね。

大変参考になりました。どうもありがとうございました。

通報する

お礼日時：2010/01/11 22:16

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！