外边距折叠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相邻时也会折叠
参考资料:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。