外边距塌陷

最新推荐文章于 2024-11-01 15:27:05 发布

发际线预备队

最新推荐文章于 2024-11-01 15:27:05 发布

阅读量123

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_46204746/article/details/128405835

版权

为了解决段落之间垂直方向的空隙，让一些元素垂直方向间距相同。
只能发生在块级元素的垂直方向身上
外边距计算
- 正数 && 正数取最大的数
- 负数 && 负数取绝对值最大的数
- 正数 && 负数取相加的和

发生外边距塌陷的情况

相邻父子元素垂直外边距塌陷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
        padding: 0px;
        margin: 0px;
       }
       .father {
        width: 300px;
        height: 300px;
        background-color: tomato;
       }
       .son {
        width: 200px;
        height: 200px;
        background-color: cadetblue;
        margin-top: 100px;
       }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

想象中的效果：子元素在父元素里垂直向下移动100px
实际上的效果：父子外边距合并，作用在父元素身上。
注意：同时给父元素和子元素设置上外边距时，外边距合并，会取两则较大值并作用在父元素身上，父元素和子元素一起向下移动。

相邻兄弟元素垂直外边距重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       * {
        padding: 0px;
        margin: 0px;
       }
       .broA {
        width: 150px;
        height: 150px;
        background-color: brown;
        margin-bottom: 50px;
       }
       .broB {
        width: 150px;
        height: 150px;
        background-color: teal;
        margin-top: 100px;
       }
    </style>
</head>
<body>
    <div class="broA"></div>
    <div class="broB"></div>
</body>
</html>

我们想象的可能是：兄弟元素间间距为50+100=150px
实际运行结果：外边距塌陷（合并），兄弟元素共用一个外边距，且取较大值

解决方法

相邻父子元素垂直外边距塌陷

给父元素添加 border

.father {
    width: 300px;
    height: 300px;
    background-color: tomato;
    border: 1px solid transparent;
}

给父元素添加 padding

.father {
    width: 300px;
    height: 300px;
    background-color: tomato;
    padding: 1px;
}

将父元素设置成BFC，形成独立的渲染区域

给父元素设置 overflow: hidden

.father {
    width: 300px;
    height: 300px;
    background-color: tomato;
    overflow: hidden;
}

给父元素设置浮动

.father {
    width: 300px;
    height: 300px;
    background-color: tomato;
    float: left;
}

给父元素设置绝对定位

.father {
    width: 300px;
    height: 300px;
    background-color: tomato;
    position: absolute;
}

相邻兄弟元素垂直外边距重叠

将下面的兄弟元素设置为浮动

.broB {
    width: 150px;
    height: 150px;
    background-color: teal;
    margin-top: 100px;
    float: left;
}

将下面的兄弟元素设置为绝对定位

.broB {
    width: 150px;
    height: 150px;
    background-color: teal;
    margin-top: 100px;
    position: absolute;
}

发际线预备队

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫