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

tags: [css]

categories: [css/Less]

---

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

发生margin重叠场景

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

<style>
p:nth-child(1){
  margin-bottom: 20px;
}
p:nth-child(2){
  margin-top: 30px;
}
</style>

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

image.png -> image.png

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

<style type="text/css">
    section    {
        margin-top: 13px;
        margin-bottom: 87px;
    }

    header {
        margin-top: 87px;
    }

    footer {
        margin-bottom: 13px;
    }
</style>

<section>
    <header>上边界重叠 87</header>
    <main></main>
    <footer>下边界重叠 87 不能再高了</footer>
</section>

image.png -> image.png

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

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

<style>
p {
  margin: 0;
}
div {
  margin-top: 13px;
  margin-bottom: 87px;
}
</style>

<p>上边界范围是 87 ...</p>
<div></div>
<p>... 上边界范围是 87</p>

PS

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

解决方法

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

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

参考：外边距折叠｜MDN