这是一个早以前研究过的东西，今天java开发说起了这个，顺带记录一下。
这里有一行代码，很简单的一段代码.
<style type="text/css">
#div1{
background:#000;
width:100px;
height:100px;
margin-top:10px;
}
#div2{
margin-top:20px;
background:#f00;
width:50px;
height:50px;
}
</style>
<div id="div1">
<div id="div2"></div>
</div>
可是在浏览器中打开后，居然是这个样子的~
从效果上看div2的margin-top像是没有生效，经测量div1的margin-top值，发现这个div2的margin-top像是生效到div1上了。
就这几行代码写错是不大可能，那这又是怎么回事？
之前遇到这个问题时，试遍了所有的浏览器，都是这个样子。
我就觉着这是个兼容性极佳的BUG。
后来一个偶然的机会发现在父级上增加border或者
overflow:hidden是可以规避这个问题，且这个问题只会在常规流向中出现，也就是说用position或者是float都不会存在这个问题。
整点原理规范什么的提高一下:
百度一下，你就知道。。
以下来自W3C CSS2.1规范:http://www.css88.com/book/css2/box.html#margin-properties
8.3.1 边距重合
在本规范中，表述边距重合意味着两个或多个框（可能相邻也可能嵌套）的相邻的边距（其间没有边白或边框间隔）重合在一起而形成一个单一的边距。 CSS2中，水平边距永远不会重合。 垂直边距可能在特定的框之间重合：1、常规流向中两个或多个块框相邻的垂直边距会重合。结果的边距宽度是相邻边距宽度中较大的值。如果出现负边距，则在最大的正边距中减去绝对值最大的负边距。如果没有正边距，则从零中减去绝对值最大的负边距。2、在一个浮动框和其它框之间的垂直边距不重合。3、绝对和相对定位的框的边距不重合。
首先了解到这并不是BUG，而是个规范，虽然看上去像是BUG,按着规范试一下,觉着还是像是个BUG。
看规范是一目十行，过目就忘,还是整理一下。
外边距合并的触发条件：
- 常规流向布局，未使用定位或者是浮动
- 存在垂直边距
- 父级元素不存在border,overflow:hidden
- 在父级元素与子元素之间不存在拥有实际高度的元素(包含文本)
外边距合并的解决方式：
- 父级元素增加border,overflow
- 使用定位或者是浮动
- 使用padding-top替代margin-top,比较推荐这
个。
@拭目以待
表格管理插件:gridmanager.lovejavascript.com && github地址
QQ交流群 (452781895)：How To Make Love
《野生前端工程师》专辑中所有文章均为@拭目以待 原创，转载请注明出处。
