在标准文档流中（即没有浮动，如果设置了浮动那就不会出现这中情况了），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>