CSS外边距塌陷是前端布局中非常常见的问题，指的是当两个垂直方向相邻的块级元素相遇时，它们的外边距不会简单相加，而是会合并成一个外边距，最终取值为两个外边距中较大的那个。
外边距塌陷的常见场景
外边距塌陷主要出现在以下几种场景中：
- 相邻兄弟元素之间的垂直外边距塌陷
- 父元素和第一个子元素、最后一个子元素之间的垂直外边距塌陷
- 空块级元素自身的上下外边距塌陷
外边距塌陷的原因
这种现象是CSS规范明确规定的，主要和块级元素的垂直外边距合并规则有关。CSS规范中说明，当两个垂直方向的块级外边距相遇时，它们会形成一个外边距，这个外边距的大小等于两个发生合并的外边距中较大的那个。这样设计的初衷是为了让段落等文本类元素的排版更自然，比如上下两个段落的外边距不会叠加导致间距过大。
相邻兄弟元素塌陷示例
下面是两个相邻div元素的代码示例，我们给两个元素都设置20px的上下外边距，实际它们之间的间距会是20px而不是40px：
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #f00;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: #0f0;
margin-top: 20px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
父子元素塌陷示例
当父元素没有设置边框、内边距或者触发特定格式化上下文时，第一个子元素的margin-top会传递给父元素，导致父元素和子元素一起向下移动：
<style>
.parent {
width: 300px;
height: 300px;
background-color: #ccc;
}
.child {
width: 100px;
height: 100px;
background-color: #f00;
margin-top: 50px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
外边距塌陷的解决方案
针对不同的塌陷场景，我们可以采用对应的解决方法：
1. 相邻兄弟元素塌陷解决
如果不需要两个元素的外边距合并，可以给其中一个元素设置display: inline-block，因为外边距合并只发生在块级元素之间，行内块元素不会触发这个规则：
.box1 {
width: 200px;
height: 200px;
background-color: #f00;
margin-bottom: 20px;
display: inline-block;
}
2. 父子元素塌陷解决
可以通过以下几种方式解决父子元素的外边距塌陷：
- 给父元素设置
border-top，哪怕边框宽度是0.1px也可以阻止塌陷 - 给父元素设置
padding-top，替代子元素的margin-top - 给父元素触发BFC（块级格式化上下文），比如设置
overflow: hidden、display: flow-root等
下面是使用display: flow-root解决父子塌陷的代码示例：
.parent {
width: 300px;
height: 300px;
background-color: #ccc;
display: flow-root; /* 触发BFC，阻止外边距塌陷 */
}
.child {
width: 100px;
height: 100px;
background-color: #f00;
margin-top: 50px;
}
3. 空块级元素塌陷解决
空块级元素自身的上下外边距合并时，可以给元素设置border、padding或者触发BFC来阻止合并。
总结
CSS外边距塌陷是符合规范的正常现象，并不是浏览器的bug。开发者需要理解其触发条件和规则，根据实际布局需求选择合适的解决方案。如果是文本排版场景，塌陷反而能让内容间距更合理；如果是布局组件场景，就可以通过触发BFC、设置边框或内边距等方式避免塌陷带来的布局异常。