Question

当我们在外部div上有一个边框时，我可以理解下面的第一个例子。保证金崩溃所以我们只获得20px的保证金。

但是第二个例子看起来很奇怪，当我们这样时，保证金如何崩溃为零从外部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

Answer 1

当且仅当...没有线框，没有间隙，没有填充且没有边框将它们分开时，两个边距相邻

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

Answer 2

因为如果边框（或填充）将块级父级与其分开，则第一个流内块级别的子边距将不会崩溃。另请注意，对于浮动的元素，显示值为inline-block的元素或绝对定位的元素，边距不会折叠。正如Toxz指出的那样，请查看spec以获得深入的解释：

流入块元素的上边距与其第一个边缘折叠如果元素具有否顶部，则流入块级别子级的上边距边框，没有顶部填充，并且孩子没有间隙

利润率下降并不理解这个例子

2 个答案: