1 概念
当块级元素的上下外边距相邻时，有时会合并为一个外边距，其大小取其中的最大者，这种情况成为外边距合并。
注意：
- 一定要相邻，中间不能有任何东西，包括边框和内边距。
- 浮动元素和绝对定位元素的外边距不会合并。
2 出现外边距合并的三种情况
2.1 相邻兄弟元素之间
相邻的两个兄弟元素之间的外边距会合并，大小取最大者。
<!DOCTYPE html>
<head>
<style>
.node {
background-color: red;
margin: 20px;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="node">节点1</div>
<div class="node">节点2</div>
</body>
2.2 父元素与第一个或最后一个子元素之间
当父元素与边界子元素的margin相邻时，边距会发生合并。切记父元素不能有相应的边框与内边距。
<!DOCTYPE html>
<head>
<style>
.father {
width: 200px;
height: 200px;
margin-top: 50px;
background-color: red;
}
.child {
width: 50px;
height: 50px;
margin-top: 250px;
background-color: green;
}
</style>
</head>
<body>
<div class="father">
<div class="child">child</div>
</div>
</body>
2.3 元素自身
当元素高度为0，无边框无内边距时，上下外边距会发生合并。
<!DOCTYPE html>
<head>
<style>
.contrast {
width: 200px;
height: 100px;
background: red;
}
.father {
margin: 50px;
}
</style>
</head>
<body>
<div class="contrast">对比元素</div>
<div class="father"></div>
<div class="contrast">对比元素</div>
</body>
2.4 注意事项
- 即使某一外边距为0，这些规则仍然适用。因此就算父元素的外边距是0，第一个或最后一个子元素的外边距仍然会“溢出”到父元素的外面。
- 如果参与合并的外边距中包含负值，合并后的外边距的值为最大的正边距与最小的负边距（即绝对值最大的负边距）的和。
- 如果所有参与合并的外边距都为负，合并后的外边距的值为最小的负边距的值。这一规则适用于相邻元素和嵌套元素。
3 如何解决
3.1 元素之间
- 隔绝两个兄弟元素：在两个元素之间添加其他元素。
- 变为浮动元素
- 变成绝对定位元素
3.2 父子元素之间
- 隔离父子元素：父元素添加border、padding
- 父元素变为BFC
3.3 元素自身
- 隔绝上下边距：通过border、padding
- 元素变为BFC
