margin塌陷（重叠）的思考

最新推荐文章于 2024-05-03 22:21:39 发布

A 萧一刀

最新推荐文章于 2024-05-03 22:21:39 发布

阅读量1k

点赞数 2

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_45276279/article/details/123034006

版权

一、什么是margin塌陷（重叠）

兄弟节点之间
例子1：

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .box1{

            width: 100px;
            height: 100px;
            background-color: #ccc;
            margin-bottom: 30px;/*下边距*/
            
        }
        .box2{

            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 30px;   /*上边距*/

        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

结果：
在这里插入图片描述

刚入门很容易以为应该是60px，这里却是30px，这便是外边距塌陷（重叠）中的一种情况

父子节点之间
例子2

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .parent{
            width: 120px;
            height: 100px;
            background-color: rgba(255, 0, 0, 0.5);
            margin-top: 30px;
        }
        .son{
            width: 100px;
            height: 50px;
            background-color: rgba(0, 0, 255, 0.5);
            margin-top: 40px;/*注意看，子节点比父亲的外边距还要大*/
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">儿子</div>
        父亲
    </div>
</body>
</html>

在这里插入图片描述
父亲的外边距被儿子“顶”了下去，这是第二种情况

二、出现margin塌陷的条件（缺一不可）

block元素（inline和inline-block都没有这样的问题）
垂直方向（margin-top 和margin-bottom）
处于正常文档流
无边界约束（即没有设置border、padding）

三、为什么会出现margin塌陷

这里涉及margin的设计思想，margin可以理解为不允许多少范围内有非空元素，说人话就是如果一个块元素的margin-top是30px,那么该块元素的内容上方30px不允许出现有其他元素、文本、注释等节点。

四、如何计算

网上很多说法是（适用于兄弟、父子两种情况）：

两者都是正数，取 $max \{ margin1,margin2\}$
如果是一正一负，取 $正值 + 负值$
两个都是负值，取 $min\{ margin1 ,margin2 \}$

但是在实际上，这样去理解会有点反人类，虽然在计算机内部是应该这样去理解，如果换作是人类语言，可以按照第三点说的margin可以理解为不允许多少范围内有非空元素。

举例：

都是正数（以兄弟为例）
很容易理解，如开头的例子1，兄弟之间分别都设置了margin，按照计算方法1，取两者的最大值，就是30px，所以兄弟之间的margin为30px，按照我的理解，兄弟之间都设置了不允许有元素的区域为30px，所以最终兄弟之间的margin为30px
一正一负（还是以兄弟为例）
```
<style>
   .box1{
        width: 100px;
        height: 100px;
        background-color: rgba(0, 255, 0, 0.5);
        margin-bottom: 30px;
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: rgba(255, 0, 0, 0.5);
        margin-top: -60px;
    }
</style>
```
按照计算方法2: $30 + (- 60) = - 30 p x$ ，因此兄弟之间的margin为-30
按照我的理解： 绿色的下外边距为30px，红色的上外边距往里缩了 60px，这缩掉的60px可以看作一个空元素，因此进入了绿色块的领域（也就是绿色区域再往下延伸30px） 里面，最终形成这样的效果
都是负数（以父子为例）

<head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: rgba(0, 0, 255, 0.5);
        }
        .parent{
            width: 120px;
            height: 100px;
            background-color: rgba(255, 0, 0, 0.5);
            margin-top: -60px;
        }
        .son{
            width: 100px;
            height: 80px;
            background-color: rgba(0, 255, 0, 0.5);
            margin-top: -30px;/*注意看，子节点比父亲的外边距还要大*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="parent">
        <div class="son">儿子</div>
        父亲
    </div>
</body>

按照计算方法3: 最小值为-60px
按照我的理解： 这里添加了一个box的盒子来作为参照物（margin：0），在这个例子中，父盒子塌陷了60px，子盒子塌陷了30px，同理，父盒子进入了box的领域里面上移了60px，而子盒子因为是属于父盒子的，因此也会跟着父盒子进入box的领域，另外，如果子盒子设置的上边距比父盒子大，那么父盒子也会被子元素往下拉
在这里插入图片描述
综上，大家可以试着以两种方式去理解margin塌陷（重叠）

五、解决办法

感谢技术蛋老师给出了很多方法，我这里整理了一下思路。
参考解决死锁的思路，考虑margin塌陷的产生原因，消除一个或多个的条件：

兄弟之间重叠
- 底部元素变为行内盒子：display：inline-block （消除块元素）
- 底部元素设置成浮动：float （脱离文档流，但是浮动对居中比较麻烦，所以不推荐使用）
- 底部元素的position的值为absolute/fixed （脱离文档流）
父子之间重叠
- 父元素加入：overflow：hidden （BFC，可能会隐藏掉一部分的内容，比较局限）
- 父元素添加透明边框：border:1px solid transparent （添加边界约束）
- 父元素设置内边距：padding-top: 10px (添加边界约束，推荐使用，此时子元素再设置margin，也会待在父元素内部)
- 子元素变为行内盒子：display：inline-block （添加边界约束）
- 子元素设置成浮动：float （脱离文档流，但是浮动对居中比较麻烦，所以不推荐使用）
- 子元素设置position的值为absolute/fixed （脱离文档流）

补充一点：position：relative是相对于原来位置的，设置之后仍然处于文档流中，所以设置相对定位不能打破margin塌陷的条件

六、具体应用

这里列举几种应用(其实大多数时候margin塌陷会认为是bug，所以最好还是使用一些常规的方法来实现下面的效果，如定位，计算padding)：

顶边对齐

<style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: -100px;   
        }
        .box2{
            width:100px;
            height: 50px;
            background-color: green;
        }
</style>

在这里插入图片描述

垂直居中

    <style>
        .box1 {
            width: 100px;
            height: 80px;
            background-color: red;
            margin-bottom: 40px;
        }

        .box2 {
            width: 100px;
            height: 40px;
            background-color: green;
            margin-top: -100px;
        }
    </style>

在这里插入图片描述

A 萧一刀

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
margin塌陷（重叠）的思考

一、什么是margin塌陷（重叠）兄弟节点之间例子1：<!DOCTYPE html><html lang="en"><head> <style> .box1{ width: 100px; height: 100px; background-color: #ccc; margin-bottom: 30px;/*下边距*/
复制链接

扫一扫