问题如下
一段很简单的代码：
css如下：
html结构如下
当在crystal没有设置margin-top时，浏览器显示如预期
设置了margin-top后出现了如下所示的现象：
我们并没有给外层的div设置margin-top，但是还是距离浏览器最顶部产生了50px的间距，查看这50px间距属于哪个元素，会发现外层div的margin依然是0 auto; 所以这个margin还是属于h2,为什么会这样？
来看css2.1盒模型中规定的内容：
因为嵌套也属于毗邻，所以在样式表中优先级更高的.show h2的margin覆盖了之前外层div定义的margin，导致最终整个div产生10px的间距。
若给h2也添加一个class，并且在.show之前定义，则最终结果如第一个图所示，最终margin显示为0；
解决办法：
1. 父级或子元素使用浮动或者绝对定位absolute
浮动或绝对定位不参与margin的折叠
2. 父级overflow:hidden;
3. 父级设置padding（破坏非空白的折叠条件）
4. 父级设置border