firefoxにおけるmargin-topの表示について【CSS】

質問

教えてください。とても困っています。

下記のようなCSSがあります。

#big {
margin: 0px;
padding: 0px;
width: 150px;
background: #000000;
height: 150px;
}

#small {
margin: 5px;
padding: 0px;
height: 140px;
width: 140px;
text-align: center;
background: #FFFFFF;
}

これをｈｔｍｌで次のようにします。

<div id="big">
<div id="small">
</div>
</div>

これでしたら、IEのほうでは、bigの中にきちんと#smallが収まっていて、
#smallのマージンも上下左右きちんと5pxずつ取られていて、
結果的に見た目は#smallの周りに黒い5pxの枠（#big）があるような四角が出来上がります。（自分的に意図したのがこの形です）

ですが、firefoxで見ると、なぜか#smallのtopのマージンだけうまく反映されてなくて
#bigにmarginが反映されてしまうようになります。
結果的に、#smallの周りに出来るはずの5pxの枠は左右はきちんとできるのですが、
下に10pxの黒枠が出来て、上には枠は出来ず、#bigごと5px下に下がったような形になります。

どのようにしたら、firefoxでもちゃんとしたtop-marginの表示が出来るのでしょう？
(=IEのように表示できるのでしょうか？）

ちなみに、#bigか#smallにfloatで右か左を設定したら、IEでもfirefoxでも
キレイな形になります。
ただ、この方法が正しいのかわからなくて。

ご存知の方がいらっしゃいましたら、教えていただけますか？

回答No.1

noname#261745 · ベストアンサー

その現象は、マージンの相殺と言い、マージンが相殺される方が正解です。
floatすると希望通りになるのは、float要素はマージンを相殺しないからですね。
この場合#smallのmarginではなく、#bigのpaddingにした方がいいと思います。

参考URL：

http://hp.vector.co.jp/authors/VA022006/css/box.html#collapsing-margins

お礼

ratoaさま

回答いただきましてありがとうございます。
上記の件了解いたしました。

大変助かりました。

参考URLのほう、拝見しましたところ、納得いたしました。

raotaさまの回答で解決しました。
心よりありがとうございました。