本文介紹了css中子元素設置margin-top為什么影響了父元素，分享給大家，具體如下：
1
2
<style type="text/css"> *{ margin: 0px; padding: 0px; } .show{ margin: 0px auto; width: 200px; height: 100px; background-color: #999999; } .show h2{ margin-top: 50px; cursor: pointer; } </style> <body> <div class="show"> <h2>crystal</h2> </div> </body>
兩個div，子元素div設置了margin-top后，發現並沒有跟想象的一樣，而發現父元素產生了間距。
如上圖。
原理：margin折疊
在css2.1盒模型仲規定的內容
因為嵌套也屬於毗鄰，所以在樣式表中優先級更高子元素的margin會覆蓋外層父元素定義的margin。
父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。
解決辦法：
1、父元素或者子元素使用浮動或者絕對定位。
2、父級設置overflow:hidden
3、父級設置padding（破壞非空白的折疊條件）
4、父級設置border