CSS盒模型常见问题

外边距折叠Collapsing margins

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <style>
        body
        {
            height:300px;
            width:300px;
            padding:0;
            margin:0;
            background:#e9f2f1;
            border:2px solid #ad3a37;
        }

        .parent{
            width:200px;
            height:200px;
            margin:0 auto;
            background:#009a61
        }
        .child{
            width:100px;
            height:100px;
            margin-top:50px;
            background:#ad3a37
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
</div>
</body>
</html>

图片描述

div.parent的margin属性为margin:0 auto，与body之间不应该有空隙，但是由于div.child的margin属性设置为margin-top:10px，div.parent出现了一个本不该有的margin-top:10px效果。
原因在于：W3C的盒模型-Collapsing Margins

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

毗邻的两个或多个外边距(margin)会发生折叠。要发生折叠要满足一下两种情况：

外边距没有被非空内容、padding、border或clear分隔。
margin都没有float、inline-block、position:absolute定义。

注意

只有垂直方向的margin才会折叠，水平方向的margin不会折叠。
所有毗邻的margin一起参与一次计算，不分步计算
在没有被分隔的情况下，一个元素的margin-top会和它普通流中的第一个子元素(非浮动元素等)的margin-top相邻；只有在一个元素的height是”auto”的情况下，它的margin-bottom才会和它普通流中的最后一个子元素(非浮动元素等)的margin-bottom相邻。

关于第2点：

<div style="margin:50px 0; background-color:green; width:50px;">
    <div style="margin:-60px 0;">
           <div style="margin:150px 0;">A</div>
    </div>
</div>
<div style="margin:-100px 0; background-color:green; width:50px;">
    <div style="margin:-120px 0;">
           <div style="margin:200px 0;">B</div>
    </div>
</div>

以上例子中，A和B之间的margin折叠产生的margin，是6个相邻margin折叠的结果。
分别是：
正值：50px，150px，200px
负值：-60px，-100px，-120px

折叠后Margin的计算

margin都为正值时，取margin最大的值
margin中有正有负时，取正负margin绝对值最大两个margin，然后带符号相加。
margin均为负值时，取绝对值最大的margin，然后带符号位移。
块级格式化内容不和子元素发生margin折叠
元素自身的margin-bottom和margin-top相邻时也会折叠

参考资料：

CSS盒模型常见问题

外边距折叠Collapsing margins

折叠后Margin的计算

abc126

引用和评论

Javascript的对象继承方法

Python删除PDF文档的页边距