外边距折叠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)会发生折叠。要发生折叠要满足一下两种情况:

  1. 外边距没有被非空内容、padding、border或clear分隔。

  2. 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的计算

  1. margin都为正值时,取margin最大的值

  2. margin中有正有负时,取正负margin绝对值最大两个margin,然后带符号相加。

  3. margin均为负值时,取绝对值最大的margin,然后带符号位移。

  4. 块级格式化内容不和子元素发生margin折叠

  5. 元素自身的margin-bottom和margin-top相邻时也会折叠

参考资料:

  1. http://bbs.csdn.net/topics/34...

  2. https://www.w3.org/TR/CSS2/bo...

  3. http://www.cnblogs.com/hejia/...


abc126
19 声望0 粉丝

引用和评论

0 条评论