031. CSS 外边距合并

块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)，这种行为称为边距折叠。

注意：设定 float 和 position=absolute 的元素不会产生外边距重叠行为。

外边距重叠的三种情况

• 同一层相邻元素之间

相邻的两个元素之间的外边距重叠，如下两个 p 标签的距离是 87px。

p:nth-child(1) {
  margin-bottom: 13px;
}
p:nth-child(2) {
  margin-top: 87px;
}

• 没有内容将父元素和后代元素分开

父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

这种情况发生在如果没有边框 border，内边距 padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界 margin-top 与其内一个或多个后代块级元素的上边界 margin-top；或没有边框，内边距，行内内容，高度 height，最小高度 min-height 或最大高度 max-height 来分开一个块级元素的下边界 margin-bottom 与其内的一个或多个后代后代块元素的下边界 margin-bottom。

如下

section {
  margin-top: 13px;
  margin-bottom: 87px;
}

header {
  margin-top: 87px;
}

footer {
  margin-bottom: 13px;
}

  
上边界重叠 87
  

  
下边界重叠 87 不能再高了

• 空的块级元素

块元素自身的上边界 margin-top 与元素下边界 margin-bottom 发生边界折叠。

这种情况会发生在一个块元素完全没有设定边框 border、内边距 padding、高度 height、最小高度 min-height 、最大高度 max-height 、内容设定为 inline 或是加上 clear-fix 的时候。

上边界范围是 87 ...

... 上边界范围是 87

p {
  margin: 0;
}

div {
  margin-top: 13px;
  margin-bottom: 87px;
}

• 上述情况的组合会产生更复杂的外边距折叠。

• 即使某一外边距为 0，这些规则仍然适用。因此就算父元素的外边距是 0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。

• 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px 叠在一起，边界范围的技术就是 100px -13px 的 87px。

• 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。