margin塌陷
一、margin塌陷的概念
margin塌陷是指在CSS布局中，当两个或多个元素的垂直margin（上外边距和下外边距）相遇时，它们不会按照预期叠加，而是会发生重叠，导致最终的外边距值比单独设置时小。这种现象主要发生在标准文档流中的垂直方向上，水平方向上的margin则不会发生塌陷。
二、代码演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin Collapse Example</title>
<style>
.parent {
background-color: lightblue;
width: 300px;
/* 注意：这里没有设置padding、border或overflow来避免margin塌陷 */
}
.child {
background-color: pink;
width: 100%;
height: 100px;
margin-top: 20px; /* 这个margin-top会导致与父元素的顶部发生塌陷 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
<p>注意：在这个例子中，由于margin塌陷，父元素和子元素一起向下移动了20px，而不是仅在子元素内部产生间距。</p>
</body>
</html>
三、效果图示描述
页面布局：页面上有一个蓝色的矩形（.parent），它内部有一个粉色的矩形（.child）。
margin塌陷效果：
预期效果：如果margin塌陷没有发生，你可能会期望粉色的.child元素在其顶部有20px的空白区域（即margin），这个空白区域只影响.child元素，.parent元素的顶部不会移动。
实际效果：由于margin塌陷，.child元素的margin-top: 20px;实际上导致了整个.parent元素向下移动了20px，使得.parent的顶部与页面顶部之间的间距增加了20px，而不是.child元素内部增加了20px的间距。粉色的.child元素看起来像是从.parent内部距离顶部20px的位置开始绘制，但实际上.parent的顶部已经随着.child的margin-top一起移动了。
四、解决后的效果
（假设给.parent添加了border: 1px solid #000;）
蓝色的.parent元素现在有一个黑色的边框，这个边框阻止了margin塌陷的发生。.child元素的margin-top现在正确地在其内部产生了20px的间距，而.parent元素的顶部没有移动。
284
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
