1

外側の div に境界線がある場合、以下の最初の例を理解できます。マージンが崩壊するため、20px のマージンしか得られません。


しかし、2 番目の例は奇妙に思えます。外側の div から境界線を削除するだけで、マージンがゼロに崩壊する方法です。

/*Fist example */
<!DOCTYPE HTML>
<html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>"float: left" with no width set</title>
    <style type="text/css" media="screen">
        body
    {
            padding: 0;
        margin:1px;
    }
        </style>
    </head>
    <body>
        <div style="background-color: yellow; border: solid 1px #ccc;">
            <div style="margin: 20px; background-color: red;">
                <p style="margin: 20px; color:#fff; background-color: blue;">A paragraph 
                     with a  20px margin inside a div, also with a 20px margin</p>
            </div>
        </div>
    </body>
</html>

/* Secod example without a border on the outer div */
<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>"float: left" with no width set</title>
    <style type="text/css" media="screen">
     body
     {
         padding: 0;
         margin:1px;
    }
        </style>
    </head>
    <body>
        <div style="background-color:yellow;">
            <div style="margin: 20px; background-color: red;">
                <p style="margin: 20px; color:#fff; background-color: blue;">
                       A paragraph with a 20px margin inside a div, also with a 20px margin
                </p>
            </div>
        </div>
    </body>
</html>

//Tony
4

2 に答える 2

1

2 つのマージンが隣接しているのは... ライン ボックス、クリアランス、パディング、境界線がない場合に限られます。

参照: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

于 2013-08-14T23:15:23.450 に答える
1

ボーダー (またはパディング) がブロック レベルの親をその最初のインフロー ブロック レベルの子マージンと分離する場合、マージンは折りたたまれません。また、フロートされている要素、表示値が の要素、または絶対位置に配置された要素では、マージンが縮小されないことにも注意してください。inline-blockToxz が指摘したように、詳細な説明については仕様をご覧ください。

要素に上部ボーダー、上部パディングがなく、子にクリアランスがない場合、インフロー ブロック要素の上マージンは、最初のインフロー ブロック レベルの子の上マージンで折りたたまれます。

于 2013-08-14T23:19:15.273 に答える