1.margin塌陷

  • 两个块级元素上下排列，上下2个margin (margin-top、margin-bottom)会合并为1个margin，这种现象叫做外边距塌陷(collapse)。
  • 水平方向上的margin (margin-left、margin-right)永远不会collapse。
  • 最终值的计算规则:两个值进行比较 取较大的值。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <style>
  6.     *{
  7.       margin: 0;
  8.       padding: 0;
  9.     }
  10.     .container{
  11.       width: 600px;
  12.       margin: 0 auto;
  13.     }
  14.     .box1 {
  15.       height: 100px;
  16.       background: #f00;
  17.       margin-bottom: 30px;
  18.     }
  19.     .box2 {
  20.       height: 100px;
  21.       background-color: orange;
  22.       margin-top: 70px;
  23.     }
  24.   </style>
  25. </head>
  26. <body>
  27.    <div class="container">
  28.     <div class="box1"></div>
  29.     <div class="box2"></div>
  30.    </div>
  31. </body>
  32. </html>

原本想让2个div上下间隔100px，实际运行结果，2个div，上下只间距70px，因为产生了

magrin collapse。

08.外边距塌陷和传递性 - 图1

解决方法：只设置其中一个元素的margin

2.margin的传递性

两个块级元素互相嵌套的，子元素的顶部线和父元素的顶部线重叠，那么这个块级元素的margin-top值会传递给父元素，子元素不变，父级元素带着子元素一起变化。

<div class="box">
   <div class="container"></div>
</div>

*{
        margin: 0;
        padding: 0;
}
.box{
        width: 300px;
        height: 300px;
        background-color: orange;
}
.container{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-top: 100px;
}

运行结果：原本只想设置小盒子距离父级盒子margin-top: 100px;结果带着父级盒子一起玩上移动100px

08.外边距塌陷和传递性 - 图2

解决方法：

（1）给父级元素开启BFC模式

    *{
      margin: 0;
      padding: 0;
    }
    .box{
      width: 300px;
      height: 300px;
      background-color: orange;
      /* 开启BFC */
      overflow: hidden;
    }
    .container{
      width: 100px;
      height: 100px;
      background-color: red;
      margin-top: 100px;
    }

08.外边距塌陷和传递性 - 图3

（2）给父级元素设置IE盒子模型

    .box{
      width: 300px;
      height: 300px;
      background-color: orange;
      /*(1)给容器盒子设置box-sizing: border-box;*/
      box-sizing: border-box;
      (2)给容器盒子设置padding-top
      padding-top: 100px;
    }
    .container{
      width: 100px;
      height: 100px;
      background-color: red;
    }

08.外边距塌陷和传递性 - 图4