外边距合并

这篇文章需要文法复核。如何帮忙。

块元素的 topbottom 外边距有时会合并(塌陷)为单个外边距(合并后最大的外边距),这样的现象称之为 外边距合并(塌陷)。

下面三种基本情形会出现外边距塌陷:

毗邻兄弟元素
毗邻的兄弟元素的外边距会塌陷(当靠后的元素 清除浮动 时除外)。如:
<p>这个段落的下外边距被合并...</p>
<p>...这个段落的上外边距被合并。</p>
父元素与第一个/最后一个子元素
如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 borderpadding、inline content、 clearance 来分隔,或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 borderpadding、inline content、heightmin-height max-height 分隔,那么外边距会合并(塌陷)。子元素多余的外边距会被父元素的外边距截断。
空块元素
如果块元素的 margin-topmargin-bottom 之间没有 borderpadding、inline content、heightmin-height 来分隔,那么它的上下外边距将会合并。

当这些情形混合时,外边距合并更加复杂(两个以上外边距)。

即使外边距为0,这些规则仍旧生效。因此,无论父元素的外边距是否为0,第一个或者最后一个子元素的外边距会被父元素的外边距截断(根据上面的规则),在负外边距的情况下,合并后的外边距为最大正外边距与最小负外边距之和。

浮动绝对定位 元素外边距不会合并。

中文资料请见 CSS 框模型( Box module )

规范

Specification Status Comment
CSS Level 2 (Revision 1)
margin collapsing
Recommendation Initial specification

参见

文档标签和贡献者

标签: 
 此页面的贡献者: StarXY, lemopo, teoli, Ende93, fscholz, sartrey, yan
 最后编辑者: StarXY,