# 外边距折叠

MDN 外边距折叠 (opens new window)

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

注意有设定 floatposition=absolute 的元素不会产生外边距重叠行为。

# 触发条件

有三种情况会形成外边距折叠:

# 同一层相邻元素之间

相邻的两个元素之间的外边距会重叠,除非后一个元素浮动后再加上 clear-fix 清除浮动。

# 没有将父元素和后代元素分开

  1. 如果没有边框 border,内边距 padding,行内内容,也没有创建块级格式上下文清除浮动来分开一个块级元素的上边界 margin-top 与其内一个或多个后代块级元素的上边界 margin-top
  2. 或没有边框border,内边距padding,行内内容,高度 height,最小高度 min-height 或 最大高度 max-height 来分开一个块级元素的下边界 margin-bottom 与其内的一个或多个后代后代块元素的下边界 margin-bottom;

以上 2 种情况就会出现父块元素和其内后代块元素外边界重叠,重叠部分最终会溢出到父级块元素外面。

# 空的块级元素

当一个块元素上边界 margin-top 直接贴到元素下边界 margin-bottom 时也会发生边界折叠。这种情况会发生在一个块元素完全没有设定边框 border、内边距 paddng、高度 height、最小高度 min-height 、最大高度 max-height

# 一些需要注意的地方

  1. 上述情况的组合会产生更复杂的外边距折叠。
  2. 即使某一外边距为 0,这些规则仍然适用。因此就算父元素的外边距是 0,第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
  3. 如果参与折叠的外边距中包含负值,折叠后的外边距的值为最大的正边距与最小的负边距(即绝对值最大的负边距)的和,;也就是说如果有-13px 8px 100px 叠在一起,边界范围的技术就是 100px -13px 的 87px。
  4. 如果所有参与折叠的外边距都为负,折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

以上这些内容都是发生在 Block-Level 的元素,设定 floating 和 absolutely positioned 的元素完全不用担心边界重叠的问题。