html中父子级、兄弟级margin外边距合并问题的解决方法

最新推荐文章于 2023-01-16 22:20:33 发布

Delete.Q

最新推荐文章于 2023-01-16 22:20:33 发布

阅读量672

点赞数

分类专栏： web前端文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_44961514/article/details/119757517

版权

web前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在默认(标准流)布局的垂直方向上，默认情况外边距是不会叠加的，会出现合并现象。

父子级外边距合并

例如：我们设置两个div，父容器div中包裹着一个子元素div，给子元素设置一个margin-top：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>
        .father{
            width: 400px;
            height: 400px;
            background-color: red;
            

        }
        .son{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 100px;
           
            
        }
    </style>
</head>
<body>
    <!-- 父容器 -->
    <div class="father">
        <!-- 子元素 -->
        <div class="son"></div>
    </div>
</body>
</html>

我们会发现父容器也会被一并顶下去了。正常应该是子元素距离父容器顶部100px。这就是发生了边距合并现象

父子级外边距合并问题解决方法：
1.给父元素设置边框border
2.设置父元素overflow：hidden
3.给设置父元素内边距padding
4.给父元素或者子元素设置display：inline-block
5.给父元素或者子元素设置浮动
6.给父元素或者子元素设置绝对定位

兄弟级外边距合并

<!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>
        .div1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin-bottom: 100px;
        }
        .div2{
            width: 200px;
            height: 200px;
            background-color: blue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="div1">我是div1</div>
    <div class="div2">我是div2</div>
</body>
</html>

我们给div1设置了margin-bottom100px，div2设置margin-top100px，正常应该两个div之间相距200px，实际是只有100px的间距，这是因为发生了边距合并

兄弟元素之间，垂直方向外边距如果都是正数不会叠加，而会发生外边距合并现象，并且外边距最终会取数值较大的。

兄弟元素之间，垂直方向外边距如果有一个为负数，会叠加，和普通加减计算一样

兄弟元素之间，垂直方向外边距如果都为负数，不会叠加，而会发生外边距合并现象，并且外边距最终会取绝对值较大的。

解决方法：

只给其中一个设置margin

Delete.Q

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html中父子级、兄弟级margin外边距合并问题的解决方法

在默认(标准流)布局的垂直方向上，默认情况外边距是不会叠加的，会出现合并现象。父子级外边距合并例如：我们设置两个div，父容器div中包裹着一个子元素div，给子元素设置一个margin-top：100px。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
复制链接

扫一扫