CSS 外边距塌陷

[TOC]

## 1. 外边距塌陷

外边距塌陷是指在 CSS 布局中，两个或多个垂直相邻的块级元素的外边距（margin）合并为一个单一外边距的现象。这种现象主要发生在垂直方向（上下），而在水平方向（左右）一般不会出现。出现外边距塌陷主要有父子元素之间和相邻兄弟元素之间。

### 1.1. 父子元素之间

在CSS布局中，当一个块级元素的顶部外边距碰到其父元素的顶部时，会发生外边距塌陷，即子元素的顶部外边距会与父元素的顶部外边距合并为一个单一的外边距。如果父元素没有设置上内边距（padding-top）、边框（border-top），或者它的上外边距是0，那么子元素的上外边距就会超出父元素的边界，造成视觉上看起来像是父元素被向下推移的效果。

**外边距塌陷示例代码**

```HTML
<style>
    #app {
        width: 200px;
        height: 200px;
        background-color: black;
    }

#children {
        width: 100px;
        height: 100px;
        margin: 50px 0px 0px 50px;
        background-color: green;
    }
</style>
<div id="app">
    <div id="children"></div>
</div>
```

<img src="/UploadFlie/MarkdownImg/20241205/202412050630006901.png" style="border:1px solid #ddd">
示例效果图中可以看到视乎是#app向下移动了50px，其实#app并没有margin-top: 50px,而#children是有的，这就是外边距塌陷造成的效果

> 当子div在父div中使用margin时，可能会出现外边距合并（Margin Collapsing）的情况。外边距合并是指两个或多个相邻的外边距（可能是兄弟元素或者父子元素之间）会合并成一个外边距。
在父子元素的场景中，如果子元素有margin - top，它会与父元素的margin - top合并。如果父元素没有margin - top，子元素的margin - top会传递给父元素，导致看起来子元素的margin没有生效。

### 1.2. 相邻兄弟元素之间

当两个块级元素（如两个div元素）上下相邻时，它们之间的垂直外边距会塌陷。这是因为 CSS 规范规定，两个垂直相邻的块级元素的外边距会合并为一个外边距，这个合并后的外边距大小取两者中较大的值。

```HTML
<style>
 .div1 {
    margin-bottom: 30px;
    background-color: lightblue;
  }
 .div2 {
    margin-top: 20px;
    background-color: lightgreen;
  }
</style>
<div class="div1">这是第一个div</div>
<div class="div2">这是第二个div</div>
```

在这个例子中，.div1的下外边距是30px，.div2的上外边距是20px。按照外边距塌陷的规则，它们之间的垂直间距是30px（取两者中的较大值），而不是30 + 20 = 50px。

## 2. 解决外边距塌陷的办法

解决外边距塌陷的思路就是不要让元素之间的外边距合一既可，那么思路可以是给元素添加内边距、添加外边框、再或者直接改变元素外边距合并的这个特性，例如：将块元素属性改成行块属性

### 2.1. 添加内边距

```HTML
<style>
    #app {
        width: 200px;
        height: 200px;
        background-color: black;
        padding-top:1px; /*可阻止外边距塌陷*/
    }

#children {
        width: 100px;
        height: 100px;
        margin: 50px 0px 0px 50px;
        background-color: green;
    }
</style>
<div id="app">
    <div id="children"></div>
</div>
```

### 2.2. 添加边框

```HTML
<style>
    #app {
        width: 200px;
        height: 200px;
        background-color: black;
        border-top:1px solid; /*可阻止外边距塌陷*/
    }

#children {
        width: 100px;
        height: 100px;
        margin: 50px 0px 0px 50px;
        background-color: green;
    }
</style>
<div id="app">
    <div id="children"></div>
</div>
```

### 2.3. 使用内边距代替外边距

这种方式适合父子类外边距塌陷

```CSS
#app {
    width: 200px;
    height: 200px;
    padding-top:50px;
    background-color: black;
}

#children {
    width: 100px;
    height: 100px;
    margin-left: 50px;
    background-color: green;
}
```

> Tips：这种方式适合父子类外边距塌陷

### 2.4. 触发 BFC

BFC（Block Formatting Context）是一个独立的渲染区域，它规定了内部的块级盒子如何布局，并且与外部的盒子互不干扰。可以通过以下方式在父元素上触发 BFC：

#### 2.4.1. 内容行块化

父子元素造成的外边距塌陷可利用 inline-block 和 block 之前的差异来处理，首先知道 block 垂直方向上的外边距（`margin`）会发生合并，而 inline-block 是不会发生垂直合并的情况的，每个`inline - block`元素的外边距都会独立起作用。

```HTML
<style>
    #app {
        width: 200px;
        height: 200px;
        background-color: black;
    }

#children {
        width: 100px;
        height: 100px;
        margin: 50px 0px 0px 50px;
        background-color: green;
        display:inline-block;
    }
</style>
<div id="app">
    <div id="children"></div>
</div>
```

#### 2.4.2. 内容溢出

设置overflow属性（除visible以外的值）：例如，将父元素的overflow设置为auto或者hidden

```CSS
#app {
    width: 200px;
    height: 200px;
    overflow: auto;
    background-color: black;
}

#children {
    width: 100px;
    height: 100px;
    margin-left: 50px;
    background-color: green;
}
```

#### 2.4.3. 设置display属性为flow-root

```CSS
#app {
    width: 200px;
    height: 200px;
    display: flow-root;
    background-color: black;
}

#children {
    width: 100px;
    height: 100px;
    margin-left: 50px;
    background-color: green;
}
```

`display:flow-root`可以创建一个新的BFC，使得子元素的`margin`能够按照预期工作。

#### 2.4.4. 浮动

如果将父元素设置为`float:left`或者`float:right`，也可以触发BFC，但是这种方法会改变元素的布局方式，可能会带来其他问题，例如需要清除浮动等。例如：

```CSS
#app {
    width: 200px;
    height: 200px;
    float: left;
    background-color: black;
}

#children {
    width: 100px;
    height: 100px;
    margin-left: 50px;
    background-color: green;
}
```

#### 2.4.4. 改变定位

设置`position`属性为`absolute`或`fixed`（改变元素定位方式）

将父元素设置为`position:absolute`或者`position:fixed`也可以触发BFC，不过这样会改变元素的定位方式，使其脱离文档流，可能会影响整个页面的布局。例如：

```CSS
#app {
    width: 200px;
    height: 200px;
    position: absolute;
    background-color: black;
}

#children {
    width: 100px;
    height: 100px;
    margin-left: 50px;
    background-color: green;
}
```

> Tips：这种方式适合父子类外边距塌陷