CSS margin带来的塌陷问题

最新推荐文章于 2024-10-12 10:09:54 发布

听着一首歌

最新推荐文章于 2024-10-12 10:09:54 发布

阅读量138

点赞数 1

文章标签： css

本文链接：https://blog.csdn.net/qq_46366496/article/details/108227214

版权

CSS margin带来的塌陷问题

塌陷问题
就是当父元素包裹子元素时，子元素设置margin-top时，并不是子元素上边距离父元素上边一段距离，而是子元素和父元素同时距离bfc（块级格式上下文）下边的距离

如下

<head>
    <style>
        body{
            background-color: #ccc;
        }
        .d1{
            width: 500px;
            height: 300px;
            background: #f00;
        }
        .d2{
            width: 300px;
            height: 200px;
            background: #0f0;
            margin-top: 50px; 
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
        </div>
    </div>
</body>

在这里插入图片描述
解决塌陷问题
1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素属性为:content:"";overflow:hidden;