本文探讨了CSS中的外边距塌陷问题，包括相邻块元素和嵌套块元素的外边距合并现象。文章提供了详细的解决方案，并附带代码示例，帮助开发者理解和解决这一常见布局问题。
一、什么是外边距塌陷
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。
(1) 相邻块元素垂直外边距的合并
1.当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom 2.下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和 3.取两个值中的较大者**这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。
解决方案：
尽量给只给一个盒子添加margin值
代码演示：
<style>
.top,
.bottom {
width: 200px;
height: 200px;
background-color: pink;
}
.top {
margin-bottom: 100px;
}
.bottom {
background-color: purple;
margin-top: 50px;
}
</style>
<body>
<
最低0.47元/天 解锁文章
905
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
