問題如下

一段很簡單的代碼：

css如下：

html結構如下

當在crystal沒有設置margin-top時，瀏覽器顯示如預期

設置了margin-top后出現(xiàn)了如下所示的現(xiàn)象：

我們并沒有給外層的div設置margin-top，但是還是距離瀏覽器最頂部產(chǎn)生了50px的間距，查看這50px間距屬于哪個元素，會發(fā)現(xiàn)外層div的margin依然是0 auto; 所以這個margin還是屬于h2,為什么會這樣？

來看css2.1盒模型中規(guī)定的內(nèi)容：

因為嵌套也屬于毗鄰，所以在樣式表中優(yōu)先級更高的.show h2的margin覆蓋了之前外層div定義的margin，導致最終整個div產(chǎn)生10px的間距。

若給h2也添加一個class，并且在.show之前定義，則最終結果如第一個圖所示，最終margin顯示為0；

解決辦法：

1. 父級或子元素使用浮動或者絕對定位absolute

浮動或絕對定位不參與margin的折疊

2. 父級overflow:hidden;

3. 父級設置padding（破壞非空白的折疊條件）

4. 父級設置border