如何解决 margin “塌陷” ?

林小饼
262 阅读1分钟

外边距“塌陷”，有两种情况

第一种，兄弟元素之间

两个盒子垂直排列，上面的盒子给 margin-bottom ，下面的盒子给 margin-top ，那么它们两个的间距会重叠，以大的那个计算。

<!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>
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: skyblue;
            margin-bottom: 20px;
        }
        .box2 {
            background-color: pink;
            margin-top: 30px;
        }
    </style>
    
</head>
<body>
    <div class="box box1"></div>
    <div class="box box2"></div>    
</body>
</html>

可以发现，以上两个盒子的距离为30px,不是50px,更不是20px。解决的方法是： 两个外边距不同时出现即可。

第二种，父子元素之间

子盒子给 margin-top ，其父盒子也会受到影响，同时产生上外边距，父子元素会进行粘连

<!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: 300px;
            height: 300px;
            background-color: skyblue;          
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
      
    </style>

</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

可以发现，子元素的 margin-top 不起作用，解决的方法有：

方法1 为父盒子设置 border：1px solid transparent;

<!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: 300px;
            height: 300px;
            background-color: skyblue;
            border: 1px solid transparent;
          
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
      
    </style>

</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

方法2 为父盒子添加 overflow: hidden;

<!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: 300px;
            height: 300px;
            background-color: skyblue;
            overflow: hidden;
          
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
      
    </style>

</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

法3 为父盒子设置 padding-top 值,代替子盒子的 margin-top 值，怕撑大盒子，可以给父盒子一个 box-sizing: border-box;

<!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: 300px;
            height: 300px;
            background-color: skyblue;
            padding-top: 20px;
            box-sizing: border-box;
          
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
      
    </style>

</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

法4 为父盒子添加 position: fixed;

<!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 {
            position: fixed;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
      
    </style>

</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

法5 为父盒子添加 display：table;

<!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 {
            display: table;
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
      
    </style>

</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

法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>
        .father {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .father::before {
            content:'';
            display: table;
        }
        .son {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-top: 20px;
        }
      
    </style>

</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝