在标准文档流中（即没有浮动，如果设置了浮动那就不会出现这中情况了），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>
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
