「CSS」外边距重叠以及解决方案

tags: [css]

categories: [css/Less]

---

边距折叠：块的上外边距(margin-top)和下外边距(margin-bottom)有时合并(折叠)为单个边距，其大小为单个边距的最大值(或如果它们相等，则仅为其中一个)。

发生margin重叠场景

1. 两个相邻元素的下边距和上边距

下边界范围会...
...会跟这个元素的上边界范围重叠。

image.png

->

image.png

2. 父元素与子元素发生边距折叠

    
上边界重叠 87
    

    
下边界重叠 87 不能再高了

image.png

->

image.png

3. 空的块级元素的上下边距

该元素完全没有设定边框border、内边距paddng、高度height、最小高度min-height 、最大高度max-height时可能会发生。

上边界范围是 87 ...

... 上边界范围是 87

PS

• 如果参与折叠的外边距中包含负值，折叠后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和,；也就是说如果有-13px 8px 100px叠在一起，边界范围的技术就是 100px -13px的87px。
• 父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
• 如果所有参与折叠的外边距都为负，折叠后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。

解决方法

以上情况的组合会产生复杂的外边距折叠（普通文档流中块框的垂直边界才会发生边界叠加），行内框、浮动框或绝对定位框之间的边界不会叠加。

1. 父元素增加内边距：padding；
2. 增加透明边框：​border: 1px solid transparent;​
3. 增加绝对定位：​position: absolute;​
4. 子元素设置为行内元素或者浮动元素：​float: left;​display: inline-block;​
5. 父元素超出部分隐藏：​overflow: hidden;​

参考：外边距折叠｜MDN