掌握边距折叠

块的顶部和底部外边距有时会合并（折叠）成一个外边距，其大小是各个外边距中最大的一个（或其中一个，如果它们相等），这种行为称为 外边距折叠。请注意，浮动和绝对定位元素的外边距永远不会折叠。

外边距折叠发生在三种基本情况下

相邻兄弟元素: 相邻兄弟元素的外边距会折叠（除非后面的兄弟元素需要清除浮动）。
没有内容隔开父元素和子元素: 如果没有边框、填充、内联部分、块级格式化上下文或 *清除* 来隔开块的 margin-top 与一个或多个子块的 margin-top；或者如果没有边框、填充、内联内容、height 或 min-height 来隔开块的 margin-bottom 与一个或多个子块的 margin-bottom，则这些外边距会折叠。折叠的外边距最终位于父元素的外部。
空块: 如果没有边框、填充、内联内容、height 或 min-height 来隔开块的 margin-top 与其 margin-bottom，则其顶部和底部外边距会折叠。

一些需要注意的事项

当以上情况组合在一起时，会发生更复杂的外边距折叠（超过两个外边距的折叠）。
这些规则即使对为零的外边距也适用，因此子元素的外边距最终位于其父元素的外部（根据上面的规则），无论父元素的外边距是否为零。
当涉及负外边距时，折叠外边距的大小是最大正外边距和最小（最负）负外边距之和。
当所有外边距都为负数时，折叠外边距的大小是最小（最负）外边距。这适用于相邻元素和嵌套元素。
外边距折叠只与垂直方向相关。
在 display 设置为 flex 或 grid 的容器中，外边距不会折叠。

示例

HTML

html

<p>The bottom margin of this paragraph is collapsed …</p>
<p>
  … with the top margin of this paragraph, yielding a margin of
  <code>1.2rem</code> in between.
</p>

<div>
  This parent element contains two paragraphs!
  <p>
    This paragraph has a <code>.4rem</code> margin between it and the text
    above.
  </p>
  <p>
    My bottom margin collapses with my parent, yielding a bottom margin of
    <code>2rem</code>.
  </p>
</div>

<p>I am <code>2rem</code> below the element above.</p>

CSS

css

div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

Result

另请参阅

CSS key concepts