掌握边界重叠 | CSS Box Model: Mastering margin collapsing

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

边缘塌陷有三种基本情况：

相邻的同级

相邻同级的边缘会被折叠（除了当后者同级需要过去的浮动）.

父级和第一/最后子类

如果不存在上边框、上内边距、内联元素、块格式化上下文、清除浮动这五条（也可以说，当上边框宽度及上内边距距离为0时），那么这个块级元素和其第一个子元素的上边距就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距合并现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

若块级父元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有父元素的border、padding、inline content、height、min-height、max-height分隔时，就会发生 下外边距合并 现象。

有些事情要注意：

• 当上述情况合并时，会发生更复杂的边缘折叠（两个以上的边距）。

• 这些规则甚至适用于零的边际，所以第一个/最后一个孩子的边际在父母之外（根据上面的规则）最终是否在父母的边际为零。

• 当涉及负利润率时，折价利润率的大小是最大正利润率和最小（最负利率）负利润率之和。

• 当所有利润率都为负值时，折叠保证金的规模是最小的（最负的）保证金。这适用于相邻元素和嵌套元素。

实例

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

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

p {
  margin: .4rem 0 1.2rem 0;
  background: yellow;
}

结果

规范