外边距合并

2 位贡献者:

Summary

块元素的Topbottom 外边距有时会合并为一个外边距,称之为 外边距合并margin collapsing.

外边距合并发生在下面三种基本情形:

毗邻元素Adjacent siblings
毗邻元素的外边距会合并(当靠后的元素 清除浮动 时除外)。例如:
 <p>这个段落的下外边距被合并...</p>
 <p>...这个段落的上外边距被合并。<p>
父元素与第一个/最后一个子元素
如果块元素的 margin-top 与它的第一个子元素之间没有border, padding, inline content, clearance 分隔,或者块元素的 margin-bottom 与它的最后一个子元素之间没有padding, inline content, height, min-height, or max-height 分隔,那么外边距会合并。
空块元素
如果块元素 margin-topmargin-bottom 之间没有border, padding, inline content, height, 与min-height来分隔, 那么它的上下外边距合并。

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

即使外边距为0,这些规则仍生效。

在负外边距的情况下,合并后的外边距为最大正外边距与最小负外边距之和。

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

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

Specifications

See also

文档标签和贡献者

向此页面作出贡献: teoli, yan
最后编辑者: teoli,