CSS学习之垂直外边距合并问题

margin之垂直外边距合并问题

基本概念

概念：外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

注意：只有普通文档流中块级元素的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

出现场景：

• 父子元素

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距会发生合并。（.父元素与第一个/最后一个子元素之间的垂直外边距）

 

        

除了上垂直外边距会发生合并，下外边距也会发生合并。

• 兄弟元素

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

         

 

• 空元素

  当空元素有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并。

解决办法

（父子元素之间）

1. 给父元素添加overflow:hidden，会触发BFC。

2. 给父元素添加边框(border-top/border-bottom)。（阻隔margin直接接触）

3. 给父元素添加内边距（padding-top/padding-bottom）。（阻隔margin直接接触）

4. 给父元素或者子元素添加浮动float或者定位absolute。

5. 父元素或者子元素设置display:inline-block

（兄弟元素之间）

首先，垂直外边距的发生依赖于两个元素的margin能够相互接触到。因为兄弟元素之间外边距是无法阻隔的，是肯定会直接接触的。所以兄弟元素之间像是添加边框或者内边距是无法解决垂直外边距合并问题的。

兄弟元素之间垂直外边距合并问题，可以设置兄弟元素都float或者display:inline-block等。

此外也可以利用外边距合并这一特点，兄弟元素之间需要多大间隔，直接给其中一个元素设置margin就行。