相邻块元素和嵌套块元素的外边距合并问题

NuLi..

已于 2023-12-16 15:08:23 修改

阅读量301

点赞数 1

文章标签：前端 css

于 2023-07-15 12:03:39 首次发布

本文链接：https://blog.csdn.net/m0_74001959/article/details/131736830

版权

前言

当我们设置相邻块元素和嵌套块元素的外边距时，经常会出现外边距合并的问题，来看看两种分别怎么解决吧

一、相邻块元素设置外边距出现外边距合并

虽然a盒子和b盒子上下外边距之和为100+200=300px，但是两个盒子垂直外边距出现合并问题，只会去两个盒子中外边距较大的那个值，也就是200px

可以看到，外边距只有200px，怎么解决种问题呢，只需要当两个相邻的盒子设置垂直外边距时，尽量只设置其中一个盒子的外边距就可以了。

二、嵌套块元素设置外边距出现外边距合并

当我们为嵌套块元素设置外边距时，会出现外边距合并导致嵌套块元素塌陷的问题

我们为父盒子 f 设置上外边距50px，此时父盒子距离上边500px，当我们为子盒子设置上外边距100px时，子盒子没有按照我们想要的情况(距离父盒子100px)，而是距离父盒子0px，反而父盒子距离上边100px，此时出现了嵌套块元素塌陷问题

3.为父元素设置overflow:hidden

4.设置浮动、固定、绝对定位也不会出现塌陷问题

总结

前言

当我们设置相邻块元素和嵌套块元素的外边距时，经常会出现外边距合并的问题，来看看两种分别怎么解决吧

提示：以下是本篇文章正文内容，下面案例可供参考

一、相邻块元素设置外边距出现外边距合并

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相邻块元素垂直外边距合并</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .a {
            margin-bottom: 100px;
        }

        .b {
            margin-top: 200px;
        }
    </style>
</head>

<body>
    <div class="a">100</div>
    <div class="b">200</div>
</body>

</html>

虽然a盒子和b盒子上下外边距之和为100+200=300px，但是两个盒子垂直外边距出现合并问题，只会去两个盒子中外边距较大的那个值，也就是200px

可以看到，外边距只有200px，怎么解决种问题呢，只需要当两个相邻的盒子设置垂直外边距时，尽量只设置其中一个盒子的外边距就可以了。

二、嵌套块元素设置外边距出现外边距合并

当我们为嵌套块元素设置外边距时，会出现外边距合并导致嵌套块元素塌陷的问题

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套块元素外边距合并</title>
    <style>
        .f {
            width: 400px;
            height: 400px;
            background-color: green;
            margin-top: 50px;
        }

        .z {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="f">
        <div class="z"></div>
    </div>
</body>

</html>

我们为父盒子 f 设置上外边距50px，此时父盒子距离上边500px，当我们为子盒子设置上外边距100px时，子盒子没有按照我们想要的情况(距离父盒子100px)，而是距离父盒子0px，反而父盒子距离上边100px，此时出现了嵌套块元素塌陷问题

下面分享几个方法来解决嵌套块元素塌陷问题

1.给父盒子设置边框

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套块元素外边距合并</title>
    <style>
        .f {
            width: 400px;
            height: 400px;
            background-color: green;
            margin-top: 50px;
            /* 给父盒子设置边框 */
            border: 1px solid transparent;
        }

        .z {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="f">
        <div class="z"></div>
    </div>
</body>

</html>

此时问题已解决，但注意父盒子的高宽都增大了

2.给父盒子设置内边距

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套块元素外边距合并</title>
    <style>
        .f {
            width: 400px;
            height: 400px;
            background-color: green;
            margin-top: 50px;
            /* 给父盒子设置边框 
            border: 1px solid transparent;*/
            /* 给父盒子设置内边距 */
            padding: 1px;
        }

        .z {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="f">
        <div class="z"></div>
    </div>
</body>

</html>

此时问题已解决，但注意父盒子因为设置了内边距导致宽高变大了2px

3.为父元素设置overflow:hidden

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套块元素外边距合并</title>
    <style>
        .f {
            width: 400px;
            height: 400px;
            background-color: green;
            margin-top: 50px;
            /* 给父盒子设置边框 
            border: 1px solid transparent;*/
            /* 给父盒子设置内边距 
            padding: 1px;*/
            overflow: hidden;
        }

        .z {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="f">
        <div class="z"></div>
    </div>
</body>

</html>

此时问题已解决，父盒子大小不变

4.设置浮动、固定、绝对定位也不会出现塌陷问题

总结

以上就是今天所分享的内容，当相邻块元素设置外边距出现外边距合并问题时，只需要只设置一个盒子的外边距即可，当嵌套块元素设置外边距出现外边距合并，1.给父盒子设置边框。2.给父盒子设置内边距。 3.为父元素设置overflow:hidden

NuLi..

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
相邻块元素和嵌套块元素的外边距合并问题

当我们设置相邻块元素和嵌套块元素的外边距时，经常会出现外边距合并的问题，来看看两种分别怎么解决吧提示：以下是本篇文章正文内容，下面案例可供参考以上就是今天所分享的内容，当相邻块元素设置外边距出现外边距合并问题时，只需要只设置一个盒子的外边距即可，当嵌套块元素设置外边距出现外边距合并，1.给父盒子设置边框。2.给父盒子设置内边距。3.为父元素设置overflow:hidden。
复制链接

扫一扫