垂直方向外边距合并问题

最新推荐文章于 2023-03-20 20:36:28 发布

Angelayueyue_

最新推荐文章于 2023-03-20 20:36:28 发布

阅读量352

点赞数

分类专栏：外边距合并问题文章标签： css

本文链接：https://blog.csdn.net/weixin_44249574/article/details/107920786

版权

外边距合并问题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

外边距合并问题

——父子级：
当给子元素添加margin属性时，浏览器会把子元素垂直方向的margin值加到父元素的margin属性上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.parent{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        div.child{
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

浏览器解析如下
在这里插入图片描述
要解决问题就要知道问题是怎么产生的——当浏览器给子元素加外边距时，由于父元素没有边框约束，没有了边界感，margin冲出父级，直到遇到body元素。这就把本该设置给子元素的外边距，加给了父元素。

几种解决方案：

给父元素添加边框属性
将本应该设置给子元素的外边距设置给父元素的内边距
让父子元素其中之一脱离默认文档流
1. 给父元素/子元素添加浮动属性
2. 给父元素/子元素添加position:absolute属性
一些属性的特殊用途
1. 给父元素设置overflow:hidden属性
2. 给父元素/子元素添加display:inline-block属性

——兄弟级：
兄弟级元素在垂直方向的外边距合并规则：

两个数值均为正数时，取较大一个
两个数值均为负数时，取较小一个
两个数值一正一负时，直接相加

解决方案：
将本应该设置给两个元素的外边距设置给一个元素

Angelayueyue_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
垂直方向外边距合并问题

外边距合并问题——父子级：当给子元素添加margin属性时，浏览器会把子元素垂直方向的margin值加到父元素的margin属性上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt
复制链接

扫一扫

专栏目录