外边距折叠机制详解

隐藏用户_y
166 阅读3分钟

外边距折叠

外边距折叠就是两个块元素的上下外边距有时会折叠成单个边距，大小是两者中的最大值。

如果两个块元素的外边距相等，折叠外边距就是其中一个元素的外边距。
如果两个兄弟块元素正负外边距相邻，折叠后的外边距值为正负外边距的和。

    <div class="box1"></div>
    <div class="box2"></div>

      .box1 {
        width: 200px;
        height: 200px;
        background-color: blue;
        margin-bottom: -10px;
      }
      .box2 {
        width: 400px;
        height: 100px;
        background: cyan;
        margin-top: 20px;
      }

box1下外边距是-10px； box2的上外边距是20px，两个相邻的兄弟块元素发生外边距折叠，根据代码实践，正负外边距折叠后为10px

正负外边距demo.gif

image.png

不会发生外边距折叠的情况

浮动和绝对定位

有设定浮动和绝对定位的元素不会发生外边距折叠，因为他们脱离文档流，不会与其他元素的外边距产生重叠。

弹性布局或网格布局

display设置为flex/grid的容器不会发生外边距折叠。因为不同于普通流式布局，子元素的外边距视为相对容器的属性，外边距不再会相互折叠。

发生情况

相邻的兄弟元素

相邻的兄弟元素会发生外边距折叠（除非后面元素清除之前的浮动）

<div class="box1"></div>
<div class="box2"></div>

.box1 {
    background-color: lightcoral;
    margin-bottom: 50px; /* box1 的下外边距 */
    height: 100px;
}

.box2 {
    background-color: lightblue;
    margin-top: 30px; /* box2 的上外边距 */
    height: 100px;
}

由于box1和box2是相邻的兄弟元素，box1的下边距50px和box2的上边距30px会合并为两者边距最大值50px。页面中显示两个box之间间距50px。

44DC92AA2FF32585F53F71754C4D2EB2.gif

父元素和后代元素无缝衔接

父元素和后代元素没有被内容分开，重叠部分会溢出父元素。具体可以看下面两种情况。

  1. 没有创建border、padding、inline、BFC来分割父元素的上外边距和子元素的上外边距
    <div class="parent">
      <div class="child"></div>
    </div>

.parent {
      background-color: lightgreen;
      margin-top: 50px; /* 父元素的上外边距 */
    }

    .child {
      background-color: lightblue;
      margin-top: 30px; /* 子元素的上外边距 */
      height: 100px; /* 给子元素设置一个高度 */
    }

父元素和子元素的外边距折叠，取最大值50px，父元素顶部有50px的空白区域，子元素的30px被折叠，不会产生额外的空白区域，子元素紧挨着父元素。页面中显示为空白50px，下面是100px的子元素。

父元素和子元素合并外边距.gif

  1. 没有设定border、padding、inline、height、min-height来分割父元素和他的子元素或者多个块元素的下外边距
    <div class="empty-box"></div>
        <div class="box2"></div>

        .empty-box {
          background-color: lightgray;
          margin-top: 50px; /* 上外边距 */
          margin-bottom: 30px; /* 下外边距 */
          height: 0; /* 高度为 0 */
        }

        .box2 {
          background-color: lightblue;
          height: 100px;
        }

空盒子的边距发生折叠后外边距50px，box2直接无缝衔接出现在空盒子下面（空盒子下外边距已经折叠没了） 页面显示50px空白区域，之后显示100px的box2。

3.gif

总结

相邻的兄弟元素的外边距会折叠，取较大的值，较小的外边距会被忽略。 没有内容将父元素和子元素分开：如果父元素没有边框、内边距或高度等，父子元素的外边距会折叠，导致外边距溢出。 空的区块：如果块级元素没有内容，且没有显式的高度、内边距或边框，父元素和子元素的外边距会发生折叠。

另外，外边距折叠只会发生在块级元素垂直方向，上面的情况组合会发生更加复杂的外边距折叠情况，所以开发中请注意及时解决外边距折叠的问题～

avatar
文章
阅读
粉丝