为何子元素的margin-top会传递给父元素？

Question

如下面所示，child的margin-top传递到了parent上，这是为何？这应该是跟垂直margin的合并机制有关，这种父子之间的合并的规则是怎样的？

    <div id = "parent">
       <div id = "child">
          demo
       </div>
    </div>

#parent {
  background: red;
  width: 200px;
  height: 200px;
}
#child {
  background: green;
  width: 50px;
  height: 50px;
  margin-top: 50px;
}

Answer 1

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

比较浅的规则详见：w3school CSS 外边距合并。

---

以下皆为这里部分内容的引用，其实是W3C的相应规则的翻译。

margin折叠的产生有几个条件：

• 这些margin都处于普通流中，并在同一个BFC中；
• 这些margin没有被非空内容、padding、border 或 clear 分隔开；
• 这些margin在垂直方向上是毗邻的，包括以下几种情况：
  1、一个box的top margin与第一个子box的top margin
  2、一个box的bottom margin与最后一个子box的bottom margin，但须在该box的height 为auto的情况下
  3、一个box的bottom margin与紧接着的下一个box的top margin
  4、一个box的top margin与其自身的bottom margin，但须满足没创建BFC、零min-height、零或者“auto”的height、没有普通流的子box

垂直方向上毗邻的box不会发生折叠的情况：

• 根元素的外边距不会参与折叠
• 一个有clearance的box的上下margin毗邻，它会与紧接着的下一个box发生margin折叠，但折叠后的margin不会再与它们父box的bottom margin折叠

折叠边距的计算

当两个margin都是正值的时候，取两者的最大值；当 margin 都是负值的时候，取的是其中绝对值较大的，然后，从 0 位置，负向位移；当有正有负的时候，先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。但必须注意，所有毗邻的margin要一起参与运算，不能分步进行。

---

知道了机制发生的条件，你应该知道如何防止外边距合并了吧。

关于BFC和haslayout（IE6/7中类似于BFC的概念），详见hasLayout && Block Formatting Contexts的3.3节。

Answer 2

补充一下，关于外边距叠加，w3cplus上面有一篇比较详细的介绍：http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

Answer 3

上下外边距会合并，左右是不会合并的。