CSS外间距崩塌(margin collapse)
CSS中块盒子的上下外间距有时会崩塌或折叠成一个单一的外间距,其值为发生崩塌的上下外间距中的最大值。
发生外间距坍塌的情况可分为如下三种,当然,都是在同一个块格式化上下文(Block Formatting Context,简称BFC)中才会发生margin折叠:
相邻的兄弟节点
相邻兄弟节点的外间距会发生崩塌,除非后一个兄弟节点发生浮动。
如:
<p>看我的margin-bottom:50px;</p>
<p>看我的margin-top:30px.</p>
其样式:
p {
margin-top: 30px;
margin-bottom: 50px;
}
效果如图:
上例中发生了margin折叠,两个p元素的maegin-top和margin-bottom折叠,形成一个外间距,其值为两者中的最大值,为50px;当然你可以把其中一个值改为负值试试:
<p>看我的margin-bottom:50px;</p>
<p style="margin-top: -20px;">看我的margin-top:30px.</p>
第二个p元素margin-top为负值,效果如图:
如上图,也发生了margin折叠,形成一个外间距,其值为最大的正值加上最小的负值(-10px > -20px),所以其值为50 + (-20)= 30px.
再看如下例子
<p>看我的margin-bottom:50px;</p>
<p class="left">看我的margin-top:30px.</p>
其样式如下:
<style media="screen">
p {
margin-top: 30px;
margin-bottom: 50px;
}
.left {
float: left;
}
</style>
其效果如图:
上图中两个p元素外间距为50 + 30 = 80px,没有发生margin折叠,是因为第二个p元素发生float:left;左浮动,形成一个独立的块格式化上下文(Block Formatting Context,简称BFC)。
父节点和第一个或最后一个子节点
这种情况发生坍塌分为两种,一种margin-top坍塌,一种是margin-bottom坍塌:
- 1.不存在边框,内间距,行内内容或浮动等来分隔一个块级盒子的margin-top和其第一个子块级盒子的margin-top
- 2.不存在边框,内间距行内内容,高度,最小高度,或最大高度等来分隔一个块级盒子的margin-bottom和其最后一个子盒的margin-bottom
空块
如果不存在边框,内间距,行内内容,高度,最小高度等来分隔一个块级盒子的margin-top和margin-bottom,则会发生坍塌。
合并后margin值
以上发生外间距坍塌的情况,合并后margin值有两种:
- 1.当margin均为正值时,合并后的外间距为其中的最大值;
- 2.若某一外间距为负值,则合并后的外间距为最大的正值加上最小的负值
避免margin坍塌
有以下两种方式避免margin坍塌:
- 1.浮动定位和绝对定位的元素不会发生外检局坍塌。
- 2.一个块级格式化上下文中的父子节点或兄弟节点之间,如果任一节点形成一个独立的块格式化上下文,则不发生margin坍塌。
本文所有源码https://github.com/codingplayboy/web_demo/blob/master/css/css_collapse.html。
原创文章,转载请注明: 转载自 熊建刚的博客
本文链接地址: CSS外间距崩塌(margin collapse)
这个是经常遇见的问题,哈哈,支持。