外边距合并

约 416 字大约 1 分钟

2022-04-12

提问

块元素的上外边距和下外边距有时候会发生合并，其大小取其中绝对值最大的值，这种行为叫做外边距合并。

发生外边距合并的场景

浮动元素 和 绝对定位元素 的外边距不会发生合并。这是因为触发了 块格式化上下文 。

相邻元素之间的外边距会发生合并（如果后一个元素需要清除前面的浮动，则不一定发生合并）。
父元素与其第一个子元素之间不存在边框、内边距、行内内容、没有创建 块格式化上下文、没有清除浮动；或者父元素与其最后一个子元素之间不存在边框、内边距、行内内容、heigh、min-height、max-height，那么子元素的外边距会溢出到父元素外面。
如果一个块级元素不包含任何内容，并且在不存在边框、内边距、行内内容、heigh、min-height，则该元素的上下外边距会发生合并。

三种情况的外边距合并是可以组合产生更加复杂的外边距合并情况的。

如果外边距合并的值都是负值，则合并的值为最小的外边距的值。

如果发生外边距合并的值包含负值，则合并后的值为最大的正外边距与最小的负外边距之和。