前端布局之外边距塌陷问题

块级元素的上下外边距有时候会合并，合并后的外边距等于合并前两个外边距中的较大值，这种现象称为外边距塌陷。

外边距塌陷有以下三种情况：

同级相邻元素

同级相邻元素之间的外边距会塌陷，塌陷后的间距等于两个元素外边距的较大值（如果后者被清除浮动，不遵循此规则），例如：

h1 {
  margin: 0 0 25px 0;
  background: #cfc;
}
p {
  margin: 20px 0 0 0;
  background: #cf9;
}

同级元素外边距塌陷

父子元素间的边距塌陷

如果块级父元素中，不存在border, padding, 行内元素以及清除浮动这四条属性（对于border和padding，也可以说，当上border及上padding宽度为0时），那么这个块级元素和其第一个子元素的上外边距（margin-top）就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生 上外边距塌陷 现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

类似地，若块级父元素的下外边距（margin-bottom）与它的最后一个子元素的下外边距之间没有父元素的border, padding, 行内元素，height, min-height, max-height分隔时，就会发生 下外边距塌陷 现象。

下面是一个上外边距合并的例子：

<h1>Heading Content</h1>
<div>
  <p>Paragraph content</p>
</div>

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 40px 0 25px 0;
  background: #cfc;
}
p {
  margin: 20px 0 0 0;
  background: #cf9;
}

这段代码的输出结果为：

父子元素外边距塌陷

可以看到在正文元素中，父元素的上外边距为40px，子元素的上外边距为20px，然后最终正文和标题之间的距离却是40px而不是60px。因为父子元素间发生了外边距塌陷。为了避免边距塌陷，只需要将父元素和子元素的外边距“分隔开”，例如为父元素添加一个边框：

h1 {
  margin: 0;
  background: #cff;
}
div {
  margin: 40px 0 25px 0;
  background: #cfc;
  border-top: 1px solid #000;
}
p {
  margin: 20px 0 0 0;
  background: #cf9;
}

输出结果为：

防止父子元素边距塌陷

空的块级元素

当一个空的块级元素的上边距（margin-top）和下边距（margin-bottom）之间没有border，padding，行内元素，height，min-height分隔时，上下边距会塌陷。

小结

• 以上几种情况同时出现会产生更复杂的边距塌陷问题。
• 这些规则在边距为0时同样适用，因此父元素中的第一个和最后一个子元素的外边距总是会超出父元素（满足上述几种情况时），无论父元素的边距是否为0。
• 当使用负边距时，塌陷后的边距等于最大的正边距和最大负边距的代数和。
• 浮动元素和绝对定位元素永远不会塌陷。