CSS 世界里的 margin 合并

CSS 世界里的 margin 合并

margin 合并

块级元素的上外边距和下外边距有时会合并为单个外边距，这种现象称为 'margin 合并'。从此定义上，我们可以捕获亮点重要的信息

1. 块级元素，但不包括浮动和绝对定位元素，尽管浮动和绝对定位可以让元素块状化
2. 只发生在垂直方向，需要注意的是，这种说法是在不考虑 writing-mode 的情况下，当设置了 writing-mode 为 vertical-rl 的时候就改变了文档流的方向，此时就会发生水平方向的合并

margin 合并的 3 个场景

1. 相邻兄弟元素 margin 合并。这是 margin 合并中最常见、最基本的。

2. 父级和第一个/最后一个子元素的 margin 合并

3. 空块级元素的 margin 合并

margin 合并的计算规则

• 正正取大值

如果是兄弟相邻合并

.a{
    margin-bottom: 20px;
}
.b{
    margin-top: 20px;
}
<div class='a'></div>
<div class='b'></div>

此时，50px 比 20px 大，所以取 50px

如果是父子合并

.father{
    margin-top: 20px;
}
.son{
    margin-top: 50px;
}
<div class='father'>
    <div class='son'></div>
</div>

此时，.father 元素等同于设置了 margin-top: 50px，取最大的那个值

如果是空块级元素自身合并

.self{
    margin-top: 20px;
    margin-bottom: 50px;
}
<div class='self'></div>

此时，.self 取最大值 50px

• 正负值相加

如果是兄弟相邻合并

.a{
    margin-bottom: 50px;
}
.b{
    margin-top: -20px;
}
<div class='a'></div>
<div class='b'></div>

此时，-20px + 50px = 30px ，所以 .a 和 .b 两个元素之间的距离是 30px

如果是父子合并

.father{
    margin-top: 50px;
}
.son{
    margin-top: -20px;
}
<div class='father'>
    <div class='son'></div>
</div>

此时，.father 元素等同于设置了 margin-top: 30px，取两者相加的值

如果是空块级元素自身合并

.self{
    margin-top: -20px;
    margin-bottom: 30px;
}
<div class='self'></div>

此时，.self 取两者相加的值 -20px + 30px = 10px

• 负负最负值

如果是相邻兄弟合并

.a{
    margin-bottom: -30px;
}
.b{
    margin-top: -50px;
}
<div class='a'></div>
<div class='b'></div>

此时，-50px 比 -30px 小，所以取 -50px

如果是父子合并

.father{
    margin-top: -50px;
}
.son{
    margin-top: -20px;
}
<div class='father'>
    <div class='son'></div>
</div>

此时，.father 取最负值 -50px

如果是空块级元素自身合并

.self{
    margin-top: -20px;
    margin-bottom: -50px;
}
<div class='self'></div>

此时，.self 取最负值 -50px