CSS中的外边距塌陷问题(外边距合并)及解决方法

Insomeop

已于 2023-08-19 11:49:52 修改

阅读量288

点赞数

文章标签：前端 css

于 2023-08-09 20:29:09 首次发布

本文链接：https://blog.csdn.net/qq_68510847/article/details/132196586

版权

文章目录

1. 外边距塌陷问题
2.解决方法

1. 外边距塌陷问题

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

代码：

<style>
        .d1 {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin-top: 40px;
        }

        .d2 {
            width: 150px;
            height: 150px;
            background-color: yellowgreen;
            margin-top: 20px;
        }

        .d3 {
            width: 250px;
            height: 250px;
            background-color: turquoise;
            margin-top: 20px;
            margin-bottom: 30px;
        }
</style>

<body>
    <div class="d3">
        <div class="d1"></div>
    </div>

    
    <div class="d2"></div>
</body>

在这里插入图片描述

如图，d1和d3是父子关系，d3和d2是兄弟关系，d1和d3都设置了分别设置margin-top:40px和margin-top:30px，只有d1的生效了。而d3和d2分别设置了margin-bottom:30px和margin-top:20px，但d3和d2之间的间距只有30px。

这就是外边距塌陷。

2.解决方法

2.1 给父元素增加内边距padding值

<style>
    .d3{
        padding:1px;
    }
    
    .d4{
        padding:1px;
    }
</style>

<body>
    <div class="d4">
        <div class="d2"></div>
    </div>
</body>

在这里插入图片描述

因为是添加在父元素上，所以，如果想要d2和d3不发生外边距合并，需要给d2或者d3加一个父元素，在父元素上添加属性。

而父子关系则不用考虑这么多，直接在父元素上添加。

2.2 给父元素增加边框

<style>
    .d3{
        border:1px solid;
    }
    
    .d4{
        border:1px solid;
    }
</style>

在这里插入图片描述

2.3 给父元素增加overflow:hidden

<style>
    .d3{
        overflow:hidden;
    }
    
    .d4{
        overflow:hidden;
    }
</style>

在这里插入图片描述

2.4 浮动

给父元素或子元素增加浮动

<style>
    .d3{
        float:left;
    }
    
    .d4{
        float:left;
    }
</style>

在这里插入图片描述

浮动可以解决父子关系的问题，而兄弟关系的问题就不存在了

2.5 将父元素转换成行内块元素

<style>
    .d3{
        display:inline-block;
    }
    
    .d4{
        display:inline-block;
    }
</style>

在这里插入图片描述

同2.4

2.6 定位

绝对定位或固定定位

<style>
    .d3{
        position:absolute;
    }
    
    .d4{
        position:absolute;
        top:300px;
    }
</style>

在这里插入图片描述

绝对定位和固定定位的代码及效果是一样的

2.7 flex

<style>
    .d3{
        display:flex;
    }
    
    .d4{
        display:flex;
    }
</style>

在这里插入图片描述

最简单的方法~~~~

Insomeop

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中的外边距塌陷问题(外边距合并)及解决方法

外边距合并（叠加）的七种解决办法
复制链接

扫一扫

CSS中的外边距塌陷问题(外边距合并)及解决方法

文章目录

1. 外边距塌陷问题

2.解决方法

2.1 给父元素增加内边距padding值

2.2 给父元素增加边框

2.3 给父元素增加overflow:hidden

2.4 浮动

2.5 将父元素转换成行内块元素

2.6 定位

2.7 flex

“相关推荐”对你有帮助么？