margin塌陷与合并

最新推荐文章于 2021-07-13 08:40:00 发布

只字不留

最新推荐文章于 2021-07-13 08:40:00 发布

阅读量182

点赞数

本文链接：https://blog.csdn.net/qq15045846160/article/details/88651596

版权

一、margin塌陷。
现象：两个嵌套在一起的盒子，当给第二个盒子设置margin-top属性时，两个盒子将一起移动。

<!DOCTYPE html>
<html>
    <head>
        <title>margin塌陷</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            .box1{
                width: 200px;
                height: 200px;
                background-color: #6c6c6c;
                /* border: 1px solid #000; */
                /* overflow: hidden; */
                /* float: left; */
                /* position: absolute; */
            }
            .box2{
                width: 60px;
                height: 60px;
                background-color: #ccc;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2"></div>
        </div>
    </body>
</html>

在这里插入图片描述
解决方法：

border: 1px solid #000;
overflow: hidden;
float: left;
position: absolute;
二、margin合并。
现象：两个兄弟元素在垂直方向上的margin是合并的（不叠加）。
会取两者之间的较大值。（通常设置上一个元素的margin-bottom值）。

只字不留

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
margin塌陷与合并

一、margin塌陷。现象：两个嵌套在一起的盒子，当给第二个盒子设置margin-top属性时，两个盒子将一起移动。<!DOCTYPE html><html> <head> <title>margin塌陷</title> <style> *{ ...
复制链接

扫一扫