CSS--外边距折叠现象及解决方案

最新推荐文章于 2024-07-11 17:17:41 发布

文章写的很烂吗

最新推荐文章于 2024-07-11 17:17:41 发布

阅读量1.7k

点赞数 5

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_63590089/article/details/130869019

版权

CSS–外边距折叠现象及解决方案

1.合并现象

场景：垂直布局的块级元素，上下的margin会合并。

<style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .one {
            margin-bottom: 60px; 
        }
        .two {
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="one">11</div>
    <div class="two">22</div>
</body>

结果：最终两者距离为margin最大值。
在这里插入图片描述

解决方案：避免就好。

只给其中一个盒子设置margin。

2.坍塌现象

场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上。

<style>
        .father {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* padding-top: 50px; */
            /* border: 1px solid #fff; */
            /* overflow: hidden; */
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: skyblue;
            margin-top: 50px;
            /*float:left;*/
            /* display: inline-block; */
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">son</div>
    </div>
</body>

结果：导致父元素一起往下移动。

在这里插入图片描述

解决方案：

1.给父元素设置border-top或padding-top（分隔子元素的margin-top），设计中需减去border,padding的距离。

2.给父元素设置overflow: hiden。

3.转换成行内块元素。

4.设置浮动。

文章写的很烂吗

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
CSS--外边距折叠现象及解决方案

CSS外边距折叠问题
复制链接

扫一扫