margin的两个bug

这篇文章接着之前的BFC，讲一下margin的两个经典bug

一、margin塌陷

先看一段代码

html代码：

<div class="wrapper">
    <div class="content"></div>
  </div>

css代码：

.wrapper{
      width: 100px;
      height: 100px;
      background-color: black;
      margin-left: 100px;
      margin-top: 100px;
    }
    .content{
      width: 50px;
      height: 50px;
      background-color: green;
      margin-left: 50px;
      **margin-top: 50px;**
    }

得到的结果是

从图中可以看出我们明明为小绿方块设置了margin-top：50px，但是这个效果并没有达到我们所要的效果，这就是所谓的margin塌陷，当为里边的小绿盒子设置margin-top:150px时，两个盒子会一起向下移动。
总结：当两个盒子嵌套时，且两个盒子都设置了margin，则垂直方向上的margin按最大值计算。
解决办法：(1) 为外部的盒子加一个border：1px solid black; （这种方法不符合开发要求）
(2) 触发盒子的BFC属性，让父元素变为BFC元素

二、margin合并

接着看代码
HTML代码：

<span class="box1">123</span>
  <span class="box2">456</span>

CSS代码：

.box1{
      background-color: red;
      margin-right: 200px;
    }
    .box2{
      background-color:green;
      margin-left: 100px;
    }

效果

这种情况属于正常情况，正常情况下，两个盒子的margin不会发生重叠。
但是对于div来说，两个盒子的垂直方向的margin会发生重叠,接下来再看一段代码

HTML:

<div class="box1">123</div>
  <div class="box2">456</div>

CSS：

.box1{
      background-color: red;
      margin-bottom: 200px;
    }
    .box2{
      background-color:green;
      margin-top: 100px;
    }
    ```
 效果：
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190116100823520.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1cGVyeXVhbjU2Nw==,size_16,color_FFFFFF,t_70)
 从效果可以看出，两个盒子的垂直方向的margin取最大值。
 一般来说，这种bug可以通过给两个盒子中的一个加一个父元素，父元素设置BFC属性即可解决，但是，在开发中，这种bug并不影响我们正常使用，通过计算两个盒子的margin，为一个盒子设置margin值即可。