css之margin塌陷

margin塌陷

一、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一起移动了。