CSS之margin塌陷

margin塌陷

CSS中的外边距塌陷（Margin Collapse）问题是指在垂直方向上，当两个或多个块级元素的边距相遇时，它们之间的距离不是它们各自边距的总和，而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。

  <div class="box ac">Box 1</div>
  <div class="box bc">Box 2</div>
1
2

    .box {
      width: 100px;
      height: 100px;
      color: white;
    }

    .ac {
      background: red;
      margin-bottom: 20px;
    }

    .bc {
      background: blue;
      margin-top: 30px;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.ac和.bc有上下margin但是只生效了一个最大值。

产生原因

外边距塌陷只发生在垂直方向的块级元素上，原因如下：

• 相邻兄弟元素：垂直排列的两个兄弟元素之间的边距会发生塌陷。
• 父子元素边距：当一个块级元素为空（或高度为0），并且它的上（和/或）下边距有值时，如果它与子元素之间没有边框、内边距、内联内容、或创建了BFC（块格式化上下文）的元素分隔，那么它的边距会和子元素的边距发生塌陷。
• 空块级元素的边距：如果一个块级元素不包含任何内容，并且它的上下边距都有值，这两个边距可能会发生塌陷。

解决方案

• 使用边框（border）或内边距（padding）：通过设置border或者padding来解决。

.ac {
      background: red;
      margin-bottom: 20px;
      border-bottom: 20px solid white;
}
1
2
3
4
5

• 创建块格式化上下文（BFC）：在元素上创建一个新的BFC可以阻止它与外部元素的外边距塌陷，常见的创建BFC的方法包括设置元素的overflow属性为hidden、auto, 或者 scroll。

HTML：

    <div class="container">
      <div class="box ac">Box 1</div>
    </div>
    <div class="box bc">Box 2</div>
1
2
3
4

CSS：

      .box {
        width: 100px;
        height: 100px;
        color: white;
      }

      .ac {
        background: red;
        margin-bottom: 20px;
      }

      .bc {
        background: blue;
        margin-top: 30px;
      }

      .container {
        overflow: hidden;
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

• 使用伪元素：在父元素中添加伪元素，并为伪元素设置display: table;，这样可以阻止与子元素之间的外边距塌陷。

      .container {
        display: table;
      }
1
2
3

• 设置display: flex或display: grid：为父元素设置Flex或Grid布局会创建一个新的布局上下文，也可避免边距塌陷。

      .container {
        display: flex;
      }
1
2
3