外边距塌陷 margin collapsing
Posted liangyuqi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了外边距塌陷 margin collapsing相关的知识，希望对你有一定的参考价值。
块的顶部外边距和底部外边距有时被组合(折叠)为单个外边距，其大小是组合到其中的最大外边距，
这种行为称为外边距塌陷(margin collapsing)，有的地方翻译为外边距合并。
1.相邻的兄弟姐妹元素
- 毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。例如：
<p style="margin-bottom: 30px;">这个段落的下外边距被合并...</p> <p style="margin-top: 20px;">...这个段落的上外边距被合并。</p>
可以发现这两个段落中间的距离，不是 ”上面段落的下边距“ 与 ”下面段落的上边距“ 的 求和 ，而是两者中的较大者（在此示例中为30px）。
2.块级父元素与其第一个/最后一个子元素
- 如果块级父元素中，当上边框宽度（border-top）及上内边距距离（padding-top）为0时，那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。
- 此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。
- 若第一个子元素为float或者position：absolute/fixed，则它脱离了普通文档流，不算第一个第一个子元素。
-
举一个例子
<style type="text/css"> * { margin: 0; padding: 0; } html { background: black; //html为黑色背景 } body { background: red; //body为红色背景 } #item { width: 200px; height: 200px; background: pink; //粉色的一个块元素，设置了margin-top margin-top: 100px; } </style> <body> <div id="item"></div> </body>运行结果：
发现结果好像不按套路，粉色部分item设置的margin-top却影响了他的父元素body。如下： 理想结果：
此类出现情况：
1、父元素没有上边框2、为第一个子元素设置上外边距时解决方案：
1、为父元素增加上边框 border-top弊端：父元素会变高2、通过为父元素设置上内边距来取代子元素的上外边距 padding-top弊端：也会增加父元素的高度3、在父元素中首部增加一个空 <table>元素 （触发bfc）弊端：页面中多一个空元素而已4.父元素加一个：before伪元素
body:before{
content:"";
display:table;
}
3.空块元素
- 如果存在一个空的块级元素，其
border、padding、inline content、height、min-height都不存在。 - 那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。例如：
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
4.备注
当以上情形同时出现时，外边距合并会更加复杂（会比较两个以上外边距来最终计算出真实的边距值）。
即使外边距为0，这些规则也仍旧生效。因此，无论父元素的外边距是否为0，第一个或者最后一个子元素的外边距会被父元素的外边距"截断"(根据上面的规则)，在负外边距的情况下，合并后的外边距为最大正外边距与最小负外边距之和。
当有负边距存在时，合并后的外边距将是最大正边距加上最小负边距（即负边距中绝对值最大的一个）。
如两个兄弟元素，上面的元素的下边距为 20px ，下面的元素的上边距为 -20px ，那么发生外边距合并后，这两个元素的实际距离将变成 0px 。
BFC会阻止元素外边距合并。
(点击：深入理解BFC)
以上是关于外边距塌陷 margin collapsing的主要内容，如果未能解决你的问题，请参考以下文章