关于外边距塌陷问题的解决方案你知道哪些？

程序员文章站 2022-06-28 18:50:32

谈到外边距塌陷（也称为外边距合并），想必大家在学习的过程中也都有遇到过，那么下面就来总结一下外边距塌陷的几种情况以及解决办法吧！一，相邻父子元素垂直外边距塌陷（合并）首先我们编写一段代码来测试一下，给父元素设置为高200宽200，粉色背景；子元素为宽100高100，蓝色背景，并为子元素添加一个100px的上外边距。代码如下↓ ...

谈到外边距塌陷（也称为外边距合并），想必大家在学习的过程中也有遇到过，那么下面就来总结一下外边距塌陷的几种情况以及解决办法吧！

一，相邻父子元素垂直外边距塌陷（合并）
首先我们编写一段代码来测试一下，给父元素设置为高200宽200，粉色背景；子元素为宽100高100，蓝色背景，并为子元素添加一个100px的上外边距。
代码如下↓

<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: rgb(128, 202, 231);
            margin-top: 100px; 
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div> 
    </div>
  
</body>
</html>

可能我们想象的应该是这样的效果，子元素在父元素里垂直向下移动100px：
关于外边距塌陷问题的解决方案你知道哪些？
但实际效果确是这个样子滴！

why?这就是我们要谈到的外边距塌陷问题了，父子外边距合并，作用在了父元素身上，于是乎就出现了这种现象，还要注意的一点就是同时给父元素和子元素设置上外边距时，外边距合并，会取两则较大值，作用在父元素身上，父元素和子元素一并向下移动。

那么如何解决外边距塌陷（合并）问题呢？解决方案如下↓

给父元素加border
给父元素加padding
给父元素设置overflow:hidden;成独立渲染区域
给父元素设置浮动
给父元素设置绝对定位

二，相邻兄弟元素垂直外边距塌陷（合并）
编写一段代码来测试一下，给上面兄弟元素设置为高100宽100，红色背景，下外边距50px；下面兄弟元素为宽100高100，蓝色背景，上外边距100px。

代码如下↓

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 50px;
        }

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

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

我们想象的可能是这个样子，兄弟元素间间距为50+100=150px:
关于外边距塌陷问题的解决方案你知道哪些？
但是实际运行结果：
why?同上，外边距塌陷（合并），兄弟元素共用一个外边距，且取较大值。那么我们该如何解决？继续往下看噻~
解决方案：