边界重叠 | margin collapsing (Miscellaneous Level 2)

  CSS 中文开发手册

边界重叠 | margin collapsing (Miscellaneous Level 2) - CSS 中文开发手册

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

边缘折叠有三种基本情况：

相邻的同级元素

毗邻的两个同级元素之间的外边距会塌陷（除非后者同级需要清除过去的浮动）。

块级父元素

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

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

空块元素

如果存在一个空的块级元素，其border、padding、inline content、height、min-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;
}

结果

规范

Specification	Status	Comment
CSS Level 2 (Revision 1)The definition of 'margin collapsing' in that specification.	Recommendation	Initial definition.

  CSS 中文开发手册

  本文标题：边界重叠 | margin collapsing (Miscellaneous Level 2) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32401.html