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

heath_learning

在标准文档流中(即没有浮动,如果设置了浮动那就不会出现这中情况了),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>
阅读 1.7k
1.3k 声望
26 粉丝
0 条评论
1.3k 声望
26 粉丝
文章目录
宣传栏