CSS基础-外边距重叠

外边距重叠

外边距重叠的好处，比如在设置段落的上下边距时不会因为出现外边界合并出现双倍行距，有的布局场景下不需要外边界折叠，就需要通过技术手段去掉这个行为。

首先我们来分析说明情况下会出现外边距重叠。

兄弟块元素

• 只有上下外边距（margin-top和margin-bottom）会重叠，左右外边距不会重叠。
• inline-block行内块元素：上下左右外边距都不会出现重叠。
• float和postion=absolute浮动后不会出现重叠。
• 设置border、padding、创建BFC块格式化上下文（如overflow:auto;值非visibility）都可以避免上下外边距重叠；

父/子块元素

• 父上外边界范围和后代上外边界范围重叠

• 父元素未设置border-top

• 父元素未设置padding-top

• 没有创建BFC块格式化上下文

• 没有元素来隔离后代元素与父的上边界如元素<span>title</span>或字符串text节点。

• 父下外边界范围和后代下外边距范围重叠

• 父元素未设置border-bottom

• 父元素未设置padding-bottom

• 父元素未设置或设置的高度(height、min-height)不足以超过子元素的盒子的高度height+margin;

• 没有创建BFC块格式化上下文

• 没有元素来隔离后代元素与父元素的下边界。

空的块元素

空的块元素上外边界和下外边界贴合，会出现上下外边距重叠。

• 如果上下外边距都大于0，则取边界大的范围留下。
• 如果上下外边距有一个小于0，则取外边距为计算后的值。
• 如果上下外边距都小于0，则取外边距小的那个作为边界范围。
• 外边距小于0，则上下外边距的元素会进行反转。