Margin 塌陷（Margin Collapse） 是 CSS 布局中一个常见的现象，主要发生在块级元素之间。以下是关于 margin 塌陷的一些关键点：
1. 什么是 Margin 塌陷？
当两个垂直方向相邻的块级元素（如 <div> 或 <p>）有上下外边距（margin）时，它们之间的外边距可能会“合并”，导致实际显示的间距小于预期。这种现象称为 margin 塌陷。
2. 何时发生 Margin 塌陷？
相邻兄弟元素：如果两个相邻的块级元素都设置了 margin，上面的元素的下外边距和下面元素的上外边距将合并为较大的那个值。
父子元素：当一个块级容器（例如
<div>）里面只有一个子元素，并且该子元素有下外边距时，这个外边距可能会与父容器的下边界合并。
3. 如何解决 Margin 塌陷？
使用 Padding：给父容器添加
padding，这样可以防止 margin 塌陷。使用 Border：给父容器添加
border，这也能阻止 margin 合并。浮动（float）或定位（positioning）：通过设置
float属性或使用绝对/固定定位，可以避免 margin 塌陷。Overflow 属性：为父容器设置
overflow: auto;或overflow: hidden;也可以阻止 margin 塌陷。
示例代码
<style>
.container {
border: 1px solid #000;
}
.child {
margin-top: 20px;
}
</style>
<div class="container">
<div class="child">Child Element</div>
</div>
在这个示例中，如果不加 border、padding 等，则 .container 的高度可能不会包含 .child 的上外边距。通过调整样式可以避免这种情况。
希望这些信息对你理解 Margin 塌陷有所帮助！如果你有更具体的问题，请随时问我。
内容由零声教学AI助手提供，问题来源于学员提问
