网页标准文档流中垂直方向的margin塌陷现象

在标准文档流中(即没有浮动,如果设置了浮动那就不会出现这中情况了),body中有两个div元素,这两个div元素的宽、高都是200px,第一个div设置了margin-bottom:t0px;第二个div设置了margin-top:20px,那么实际上两个div元素之间的距离是50px,这就是margin塌陷现象,并且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>
    原文作者:heath_learning
    原文地址: https://segmentfault.com/a/1190000017757654
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞