3

HTML ブロック要素のボックス モデルには、把握できないものがあります。

次の jsFiddle をご覧ください。

http://jsfiddle.net/5b7X2/1/

外側と内側<div>があり、どちらも上下左右に同じ余白があります。外側<div>の余白が透明なので、色のついた部分の周りに白いボディが見えます。ただし、内側<div>の余白は左右にしか見えません。50px私の意見では、オレンジ色の領域の上下に赤いバーの高さがあるはずです。

なぜ私は間違っているのですか？

4

2 に答える 2

5

垂直マージンは(リンクの反対側で見つけることができるいくつかのかなり複雑なルールに従って) 互いに崩壊するため、内側のマージン上部が外側のマージン上部の下半分を占有します。

于 2012-12-04T14:11:59.727 に答える
2

これはマージンの崩壊についてだと思います。http://reference.sitepoint.com/css/collapsingmarginsにこれに関する情報があります。

これの回避策/解決策は次のとおりです。

<div id="outer">
    &nbsp;
    <div id="inner">
        Text
    </div>
    &nbsp;
</div>

</p>

于 2012-12-04T14:22:24.883 に答える