0

コードは次のとおりです。

<html>

    <head>
        <title></title>

        <style type="text/css">

        * {border: 0px; padding: 0px;}

        #greenbox
        {
            margin: 20px;
            border: 5px solid green;

        }   

        #redbox
        {
            margin: 20px;
            border: 5px solid red;
        }

        #bluebox
        {
            border: 5px solid blue; 
            margin-left: 20px;
            margin-right: 20px;
            margin-bottom: 20px;
                        margin-top: 20px; /*COLLAPSES - why??*/
        }

        </style>
    </head>
    <body>

        <div id="greenbox">

            <div id="redbox">

                red box
            </div>

            <div id="bluebox">

                    bluebox

            </div>

        </div>



    </body>
</html>

基本的には緑の箱で、中に赤い箱と青い箱が入っています。

赤いボックスと青いボックスの間の垂直方向のスペースが 40px ではないのはなぜですか?

赤いボックスの下部マージンと青いボックスの上部マージンが「折りたたまれている」ことは理解していますが、境界線またはパディングがある場合、マージンが折りたたまれないことは私の理解でした（両方を試しました-まだ同じ結果です。

4

2 に答える 2

2

余白は境界を越えて崩壊しません。それらは互いに崩壊します。

次の例を参照してください。

<style>
body { background: black; }
.red { background: red; }
.blue { background: blue; }
.border { border: solid white 1px; }
div { margin: 20px; min-height: 30px; width: 50% }
</style>


<div class="red">
    <div class="blue">
    </div>
</div>

<div class="red border">
    <div class="blue border">
    </div>
</div>

境界線が存在する場合、青い div の上部のマージンは、青い div の上部を、それが内側にある赤い div の上部から押し出します。境界線が存在しない場合、マージンは端を通過し、赤い div の周囲のマージンに折りたたまれます。

あなたの 2 つの余白は、それらの間に境界線がなく互いに接触しているため、それらは崩壊します。

于 2011-03-18T13:29:05.273 に答える
2

マージンはボックス モデルの境界線の外側にあるため、境界線は崩壊するマージンとは関係ありません。

ボックス モデルについては、http ://www.w3.org/TR/CSS21/box.html で確認できます。

ここで余白の崩壊について読むことができます: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

于 2011-03-18T13:30:59.900 に答える