在CSS布局开发中，设置div元素的margin属性后，经常会出现元素之间的间距和预期不符的情况，比如两个垂直相邻的div都设置了margin-top和margin-bottom，最终间距却只取了其中一个的值，或者父元素和子元素都设置了垂直方向的margin，间距没有叠加反而合并，这种现象就是margin塌陷。
margin塌陷的两种常见场景
1. 相邻兄弟元素的垂直margin合并
当两个垂直方向相邻的块级元素，上面的元素设置了margin-bottom，下面的元素设置了margin-top，它们的垂直间距不会是两个值的和，而是取较大的那个值，这就是相邻兄弟元素的margin塌陷。
比如下面的代码，两个div都设置了20px的垂直margin，最终它们之间的间距是20px，而不是40px：
<style>
.box1 {
width: 100px;
height: 100px;
background: #f00;
margin-bottom: 20px;
}
.box2 {
width: 100px;
height: 100px;
background: #0f0;
margin-top: 20px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
2. 父子元素的垂直margin合并
当父元素没有设置边框、内边距，也没有创建BFC，同时父元素和第一个子元素都设置了margin-top，或者父元素和最后一个子元素都设置了margin-bottom，这两个margin会合并到一起，表现为父元素顶部和子元素顶部对齐，父元素的margin会取两者中较大的值，这就是父子元素的margin塌陷。
示例代码如下，父元素和子元素都设置了20px的margin-top，最终父元素顶部距离上方元素20px，子元素顶部和父元素顶部对齐，没有额外的20px间距：
<style>
.parent {
width: 200px;
height: 200px;
background: #ccc;
margin-top: 20px;
}
.child {
width: 100px;
height: 100px;
background: #f00;
margin-top: 20px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
解决margin塌陷的常用方法
针对相邻兄弟元素塌陷
- 只给其中一个元素设置垂直方向的margin，避免两个相邻元素同时设置垂直margin。
- 将两个元素设置为浮动元素，或者设置为inline-block元素，因为margin合并只发生在块级元素的垂直方向。
针对父子元素塌陷
- 给父元素设置
border-top或者border-bottom，哪怕边框宽度设为0.1px也可以阻止margin合并。 - 给父元素设置
padding-top或者padding-bottom，替代子元素的margin设置。 - 给父元素创建BFC，比如设置
overflow: hidden、display: flow-root等属性，BFC内部的元素不会和外部元素发生margin合并。 - 给父元素或者子元素设置浮动、绝对定位等脱离文档流的属性，也可以避免margin合并。
下面的代码通过给父元素设置overflow: hidden创建BFC，解决了父子元素的margin塌陷问题：
<style>
.parent {
width: 200px;
height: 200px;
background: #ccc;
margin-top: 20px;
overflow: hidden; /* 创建BFC，阻止margin合并 */
}
.child {
width: 100px;
height: 100px;
background: #f00;
margin-top: 20px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
注意事项
margin塌陷是CSS规范中定义的特性，不是浏览器的bug，所以所有符合标准的浏览器都会有这个表现。只有块级元素的垂直方向margin会发生合并，水平方向的margin不会合并，行内元素、浮动元素、绝对定位元素的margin也不会发生合并。
在实际开发中，建议提前规划好元素的间距设置，尽量避免出现相邻元素同时设置垂直margin的情况，减少margin塌陷带来的布局问题。如果遇到间距异常，可以先检查是否存在margin塌陷的场景，再选择对应的解决方案。