margin collapsing (外边距叠加)

现象

BFC中相邻的两个block-level盒子，上一个box的下边距和下一个box的上边距会发生叠加，margin的值取两者的最大值。

  html:
  
    <div class="parent">
        <div class="b">A: margin: 20px</div>
    </div>
    <div class="parent parentc">
        <div class="c">B: margin: 20px</div>
    </div>

  css:
  .parent{
    margin: 20px;
    width: 150px;
    background-color: green;
    color: #fff;
    border: 1px solid red;
  }
  .parentc{background-color: blue;}

A和B之间的margin为20px

产生的条件

1. 只发生在同一BFC下的block-level模块。
2. IFC下的元素不会存在这个现象，即：display：inline-block的元素不会有这种现象。
3. 跨BFC模块，不会存在这个问题。

参考

谈外margin collapsing(外边距叠加)