为什么margin-top不是作用于父元素【margin外边距合并问题】

coding时发现margin-top居然没作用于本元素上，而是作用到了父元素上。

原来是margin外边距合并导致的。以下是网上搬运来的知识：

margin外边距合并详解:
外边距合并现象在网页布局中非常的常见，必须对此有明确的把握，以此做到未雨绸缪，否则可能影响工作效率，甚至严重阻碍项目的进度。在网络上已经有大量的相关文章，下面结合实例代码对margin外边距合并做一下总结。
外边距合并概念:
相邻的两个或者多个外边距在垂直方向上合并成一个外边距，这就是所谓的外边距合并。
水平方向不存在此现象。
外边距合并产生条件:
（1）.相邻的外边距之间没有非空内容、padding或者border。
（2）.元素都处于文档流中，即非浮动和position属性值不为absolute和fixed的元素。
特别说明:如果是元素是父子关系，子元素的padding和border并不能够消除合并现象。
合并可以存在于兄弟对象之间，也可以存在于父子对象之间。

外边距合并现象并非只局限于两个对象之间，只要满足外边距合并的条件就可以出现外边距合并现象，

三个外边距出现合并现象。需要特别注意的是，计算合并后外边距值的方式并非是一层一层计算的，而是遵循在上面介绍的几个原则，那么上面的合并方式就是从负值值挑选最小的和从正值挑选的最大的相加，也就是-50px+150px=100px。
还有一种比较极端的合并方式:元素本身的外边距也会合并；

如果div不能够具有高度和内容等等，因为这样上下外边距就不相邻了，外边距合并的条件就不具备了。

margin外边距合并详解
http://www.softwhy.com/forum.php?mod=viewthread&tid=4592
(出处: 蚂蚁部落)