深入理解margin塌陷和margin合并及其解决方案

1. margin塌陷

我们先来看个现象，需求是：在父子元素中，通过marigin让父元素相对左边及顶部各距离100px,也让子元素相对于父元素左边和顶部各50px。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin塌陷</title>
    <style>
        .father{
            width: 200px;
            height: 200px;
            background-color: rgb(231, 73, 107);
            margin-left: 100px;
            margin-top: 100px;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: rgb(43, 236, 194);
            margin-left: 50px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

效果如下

结果我们出乎意料会发现，水平方向的距离确实没问题，但是垂直方向上，明明子元素设置了margin-top距离顶部50px，按道理它会距离父元素顶部50px才对。事实上，这是一个bug。大家都叫它margin塌陷。很多人可能都不太理解，为什么叫它塌陷，其实可以深入理解理解，如上述例子，原本子元素要距离父元素顶部50px，现在没有动，也就是父元素的顶棚对子元素来说没有作用，相当于没有，相当于塌陷了。所以叫margin塌陷。
一句话总结：父子嵌套的元素垂直方向的margin取最大值。

但是有的时候我们不希望有这样的问题，那我们如何解决margin塌陷的问题呢
可以通过触发BFC来解决（如果你还不了解BFC可以点击链接https://www.jianshu.com/p/f996a41912e0）
如下通过overflow: hidden触发bfc ，即可

<style>
    .father{
        width: 200px;
        height: 200px;
        background-color: rgb(231, 73, 107);
        margin-left: 100px;
        margin-top: 100px;
        overflow: hidden;/* 触发bfc */            
    }
    .son{
        width: 100px;
        height: 100px;
        background-color: rgb(43, 236, 194);
        margin-left: 50px;
        margin-top: 50px;
    }
</style>

结果如下：

理想的结果

解决！

2. margin合并

还是来先看一个需求，把两个兄弟块元素，一个设置下外边距100px，一个设置上外边距100px，让两个元素相距200px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin合并</title>
    <style>
        .one{
            background-color: pink;
            height: 20px;
            margin-bottom: 100px;
        }
        .two{
            background-color: purple;
            height: 20px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

结果如下：

我们发现这两个元素之间，他们的margin-bottom和margin-top合并了，并且显示的是较大值。
同样我们可以用bfc来解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>margin合并</title>
    <style>        
        .one {
            background-color: pink;
            height: 20px;
            margin-bottom: 100px;
        }
        .two {
            background-color: purple;
            height: 20px;
            margin-top: 100px;
        }
        .wrap{
            /* 触发bfc */
            overflow: hidden;
        }
    </style>
</head>

<body>
    <!-- 这里有更改结构哦 -->
    <div class="one"></div>
    <div class="wrap">        
        <div class="two"></div>
    </div>
</body>
</html>

结果

解决问题！但是一般不这么解决，为什么？因为margin合并和margin塌陷不一样，margin塌陷只添加了CSS，margin合并除了添加CSS，还修改了HTML结构。我们知道一般html结构是不能乱改动的，所以我们通过数学计算来解决这各margin合并的问题。比如上面的例子，我们只要设置前面元素的margin-bottom为200px或者后面元素的margin-top为200px即可。

最后编辑于：2020.07.17 13:04:51