解决垂直外边距合并的几种办法

Posted 2021-05-07 zhuochong

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

 

在父级容器有上下外边距的情况下，子元素如果添加外边距，父元素和子元素的垂直方向上的外边距会合并，相邻元素也会合并。在用margin给子元素和父元素之间留空白的时候通常会发生这样的问题。

几种解决办法：

1：父容器：border：1px solid;（不能是0px）

2：父容器：overflow: hidden;（或auto）

3：父容器：padding：1px；（不能是0或auto，其他的任意数值都可以）

4：父容器或子容器： float：left；（不能是auto）

5：父容器或子容器：position：absolute；

6：子容器：display：inline-block;(或是inline-table)

7：相邻元素：任意一个添加float：left（不能是auto）