当前位置：网站首页>Interview question: outer margin folding problem (bug of block level elements in ordinary document flow)

Interview question: outer margin folding problem (bug of block level elements in ordinary document flow)

2022-07-19 08:08:00 【The.. Fuir】

One 、 Concept

Generally, it refers to the overlapping phenomenon of adjacent outer margins in the vertical direction , Most of it happens in Brother element and Father and son elements Between .

Two 、 Brother element

box2 yes box1 Brother element of

When both are positive ： Take the maximum value between the two

<!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>

One is one minus one. ： Take the sum of the two

<!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>
  <!--  When both are positive ： Take the maximum value between the two 
  <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>

Both are negative ： Take the larger absolute value

<!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>
  <!--  When both are positive ： Take the maximum value between the two 
  <style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: tomato;
        margin-bottom:50px;   
    }
    .box2{
        width: 200px;
        height: 200px;
        background-color: #bfa;
        margin-top:100px;   
    }
</style> -->

<!--  One is one minus one. ： Take the sum of the two 
<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>

3、 ... and 、 Father and son elements

box2 yes box1 Child elements

<!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>

When box2 The upper and outer margins of are set to 100：
At this time, the parent element will also move down , namely ： The outer margin of the child element is passed to the parent element .

Four 、 Four solutions

1. Add an inner margin to the parent element , Then cut off the extra length

<!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> -->
<!--  Use padding There will be no margin folding problem  -->
<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. Use outer margins but not adjacent , Add a border to the parent element , Then change the border color to the color of the parent element , Then cut the extra border length ：

   <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. Open for child elements 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： Add a blank element to the front of the parent element , Then display the element as a block element

 <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://yzsam.com/2022/200/202207170625540993.html