面试题：外边距折叠问题（块级元素在普通文档流中的BUG）

The..Fuir

已于 2022-07-18 10:58:53 修改

阅读量256

点赞数

于 2022-07-16 14:51:33 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/125818930

版权

面试同时被 3 个专栏收录

152 篇文章 51 订阅

订阅专栏

html

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

本文详细介绍了CSS中垂直外边距重叠的现象，包括兄弟元素和父子元素之间的外边距处理。当两个元素外边距均为正值时，它们之间的外边距取最大值；一正一负则取二者之和；两负值取绝对值较大者。针对父子元素的外边距传递问题，提出了四种解决方案：1) 使用内边距并裁剪多余长度；2) 利用边框代替外边距；3) 开启BFC（块级格式化上下文）；4) 使用clearfix。这些方法能有效避免外边距重叠问题。

摘要由CSDN通过智能技术生成

一、概念

一般是指垂直方向相邻的外边距会发生重叠现象，大多发生在兄弟元素和父子元素之间。

二、兄弟元素

box2是box1的兄弟元素

当两者都是正值时：取二者之间的最大值

<!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>
</head>
<body>
  <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin-bottom:50px;   
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin-top:100px;   
    }
</style>

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

</body>
</html>

一正一负：取二者之和

<!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>
</head>
<body>
  <!-- 当两者都是正值时：取二者之间的最大值
  <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin-bottom:50px;   
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin-top:100px;   
    }
</style> -->

<style>
  .box1{
      width: 200px;
      height: 200px;
      background-color: tomato;
      margin-bottom:-50px;   
  }
  .box2{
      width: 200px;
      height: 200px;
      background-color: #bfa;
      margin-top:50px;   
  }
</style>


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

</body>
</html>

两个都负值：取绝对值较大的

<!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>
</head>
<body>
  <!-- 当两者都是正值时：取二者之间的最大值
  <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin-bottom:50px;   
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin-top:100px;   
    }
</style> -->

<!-- 一正一负：取二者之和
<style>
  .box1{
      width: 200px;
      height: 200px;
      background-color: tomato;
      margin-bottom:-50px;   
  }
  .box2{
      width: 200px;
      height: 200px;
      background-color: #bfa;
      margin-top:50px;   
  }
</style> -->

<style>
  .box1{
      width: 200px;
      height: 200px;
      background-color: tomato;
      margin-bottom:-50px;   
  }
  .box2{
      width: 200px;
      height: 200px;
      background-color: #bfa;
      margin-top:-100px;   
  }
</style>



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

</body>
</html>

三、父子元素

box2是box1的子元素

<!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>
</head>
<body>
  <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: tomato;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: #bfa;
    }
</style>

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

</body>
</html>

</body>
</html>

当box2的上外边距设置为100：
这时父元素也会向下移动，即：子元素的外边距会传递给父元素。

四、四种解决方案

1.给父元素加上内边距，然后再裁去多余的长度

<!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>
</head>
<body>
  <!-- <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: tomato;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: #bfa;
        margin-top:100px;   
    }
</style> -->
<!-- 使用padding不会产生边距折叠问题 -->
<style>
.box1{
  width: 200px;
  height: 100px;
  padding-top:100px;
  background-color: tomato;
}
.box2{
  width: 100px;
  height: 100px;
  background-color: #bfa;
}
</style>

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

</body>
</html>

</body>
</html>

2.用外边距但是不相邻，给父元素加一个边框，然后把边框颜色改成父元素的颜色，再裁去多余的边框长度：

   <style>
        .box1{
            width: 200px;
            height: 199px;
            background-color: tomato;
            border-top: 1px solid tomato;
        }
        .box2{
            width: 100px;
            height: 99px;
            background-color: #bfa;
            margin-top:100px;
        }
    </style>

3.为子元素开启BFC：

  <style>  
     .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            float:left;
            margin-top:100px;
        }
  </style>

4. clearfix：在父元素的最前边增加一个空白元素，然后将元素作为块元素来显示

 <style>
     .box1{
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: #bfa;
            margin-top:100px;
        }
        .box1::before{
            content:"";
            display:table; 
       }
    </style>