共计 495 个字符，预计需要花费 2 分钟才能阅读完成。
在标准文档流中（即没有浮动，如果设置了浮动那就不会出现这中情况了），body 中有两个 div 元素，这两个 div 元素的宽、高都是 200px，第一个 div 设置了 margin-bottom:t0px; 第二个 div 设置了 margin-top:20px，那么实际上两个 div 元素之间的距离是 50px，这就是 margin 塌陷现象，并且 margin 塌陷还是以大的一方为准。如图片：
<style>
body,div{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 100px;
margin-left: 100px;
color: #fff;
font-weight: 600;
}
.box1{
background-color: #f10;
margin-bottom: 50px;
}
.box2{
background-color: #f60;
margin-top: 20px;
}
</style>
<body>
<div class=”box box1″>
margin-bottom: 50px;
</div>
<div class=”box box2″>
margin-top: 20px;
</div>
</body>
正文完
