【CSS】外边距折叠（margin 塌陷）

外边距折叠(collapsing margins)

毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。

规则如下:

• 两个或多个毗邻的普通流中的块元素垂直方向上的 margin会折叠
• 浮动元素 / inline-block元素 / 绝对定位元素 / 行内元素的margin不会和垂直方向上的其他元素的margin折叠
• 创建了块级格式化上下文(BFC)的元素，不会和它的子元素发生margin折叠

我们可以利用外边距塌陷进行很多操作：

• 居中

    .divA {
        height: 80px;
        width: 200px;
        background: #6ddb14;
        margin-bottom: 40px;
    }

    .divB {
        height: 40px;
        width: 200px;
        background: #0f80a2;
        margin-top: -100px
    }
1
2
3
4
5
6
7
8
9
10
11
12
13