margin塌陷

margin塌陷发生在下列两种情况中

1.垂直并列

/*HTML部分*/
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>
/*CSS部分*/
<style> 
  *{
       margin: 0; 
       padding: 0; 
  }
   .box1{ 
       width: 200px; 
       height: 200px; 
       background: yellowgreen;
   } 
  .box2{ 
       width: 200px; 
       height: 200px; background: gray; 
  }
</style>

对box1我们为其设置margin-bottom：50px;对box2我们为其设置margin-top： 40px;
我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.如下图所示：

两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：垂直之间塌陷的原则是以两盒子最大的外边距(margin)为准。

2.嵌套关系

/*CSS部分*/
<style>
.box1{
  width:400px;
  height:400px;
  background: pink;
}
.box2{
  width:200px;
  height:200px;
  background: lightblue;
}
</style>
/*HTML部分*/
<body>
  <divclass="box1">
  <divclass="box2"></div>
</div>
</body>

如图示

当为子盒子添加margin-top：10px;时会发生如下情况：

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙。

解决方法：
（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值。

了解下BFC(Block Fommat Content)块级格式上下文，就能很清楚的避开这些坑
了解BFC

margin塌陷

margin塌陷

1.垂直并列

2.嵌套关系

推荐阅读更多精彩内容