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 ベストアンサー 回答者： ratoa 回答日時： 2006/10/05 20:00

その現象は、マージンの相殺と言い、マージンが相殺される方が正解です。

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

参考URL：http://hp.vector.co.jp/authors/VA022006/css/box. …

この回答へのお礼

ratoaさま

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

大変助かりました。

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

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

お礼日時：2006/10/05 20:33