CSS-margin折叠现象

Z417031

于 2022-09-18 19:55:31 发布

阅读量250

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/Z417031/article/details/126908961

版权

样式设置Margin的时候会出现的有趣现象：

先给这样的一个页面：

        <style>
            #div_1{
                width: 400px;
                height: 300px;
                background-color: aqua;
            }
            #div_2{
                width: 50px;
                height: 50px;
                background-color:hotpink;
            }
            #div-3{
                width: 50px;
                height: 50px;
                background-color: yellow;
               
            }
        </style>

        <body>
        <div id="div_1">
            <div id="div_2">div2
            </div>    
            <div id="div-3">div3
            </div>

        </div>

        </body>

然后只给div2设置外边距：margin-top: 50px;

#div_2{
    width: 50px;
    height: 50px;
    background-color:hotpink;
    margin-top: 50px;
}

只添加margin-bottom

#div_2{
    width: 50px;
    height: 50px;
    background-color:hotpink;
    margin-bottom: 50px;
}

只添加margin-left

#div_2{
    width: 50px;
    height: 50px;
    background-color:hotpink;
    margin-bottom: 50px;
}

这时我并未给蓝色div设置边距，所以蓝色div应该不会移动，对比之下，可以发现添加左右边距时，蓝色的div1并没有移动，添加上边距时，div1随着一起向下移动了？？？

这就是我想说的margin折叠现象。

父级div1会随着子级div2设置边距margin-top也出现边距。

那我给div加上浮动呢？float:left;结果如下：

可以清楚的看到蓝色div1是没有上边距的：

那我们再给div3加上margin-top: 50px;

蓝色div1此时也是没有边距的。

父级元素第一个非浮动的子级元素添加margin-top时，会自动的添加在父级元素上。

那给父元素加上边框看看：

            #div_1{
                width: 400px;
                height: 300px;
                background-color: aqua;
                border: 1px solid black;
            }

            #div_2{
                width: 50px;
                height: 50px;
                background-color:hotpink;
                margin-top: 50px;
            }
            #div-3{
                width: 50px;
                height: 50px;
                background-color: yellow;
 
            }

此时的蓝色div1也没有边距。也就是说：

一个没有边框的父级元素第一个非浮动的子级元素添加margin-top时，会自动的添加在父级元素上。

以上加边框的方法可以解决，其实也可以给div1添加padding-top：50px；

            #div_1{
                width: 400px;
                height: 300px;
                background-color: aqua;
                /* border: 1px solid black; */
                padding-top: 50px;
            }

            #div_2{
                width: 50px;
                height: 50px;
                background-color:hotpink;
                /* margin-top: 50px; */
            }
            #div-3{
                width: 50px;
                height: 50px;
                background-color: yellow;
            }

那我们再看看兄弟元素

            #div_1{
                width: 400px;
                height: 300px;
                background-color: aqua;
            }
            #div_2{
                width: 50px;
                height: 50px;
                background-color:hotpink;
                margin-bottom: 50px;
            }
            #div-3{
                width: 50px;
                height: 50px;
                margin-top: 50px;
                background-color: yellow;
            }

这里我们给div2设置了下边距margin-bottom: 50px;，给div3设置了上边距margin-top: 50px;，但很明显div2和3之间的距离不是100px，是50px；

            #div_1{
                width: 400px;
                height: 300px;
                background-color: aqua;
            }
            #div_2{
                width: 50px;
                height: 50px;
                background-color:hotpink;
                margin-bottom: 10px;
            }
            #div-3{
                width: 50px;
                height: 50px;
                margin-top: 50px;
                background-color: yellow;
            }