当前位置：网站首页>面试题：外边距折叠问题（块级元素在普通文档流中的BUG）

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

2022-07-17 06:26:00 【The..Fuir】

一、概念

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

二、兄弟元素

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>

原网站

版权声明
本文为[The..Fuir]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_51066068/article/details/125818930