正在做一個手機(jī)端電商項目，頂部導(dǎo)航棧的布局是一個div包含一個子div，如果給在正常文檔流中的子div一個垂直margin-top，神奇的現(xiàn)象出現(xiàn)了，兩父子元素的邊距沒變，但父div跟著一起往下走了！

html代碼：

<div id="fatherbox">

　　<div id="childbox">首頁

　　</div>

</div>

css樣式：

#fatherbox{width:100%,height:64px;background-color:red}

#childbox{height:44px;margin-top:20px;background:yellow}

?

解決方法：

1.父元素添加padding-top樣式；

2.父元素添加overflow:hidden樣式；

3.父元素或子元素浮動;

4.給父元素添加boarder（看需求而定）；

5.為父元素或子元素絕對定位；

6.在子元素前添加子div并設(shè)置height:1px和overflow:hidden樣式（如果添加的是inline-block元素，需要改display為block）。

原理：margin折疊（Collapsing Margins）

毗鄰的兩個或多個外邊距 (margin) 在垂直方向會合并成一個外邊距。

這里的毗鄰指沒有上下padding-top,padding-bottom,border-top,border-bottom,元素內(nèi)容不為空。

最常見的margin折疊是<p>元素并列時，每個p都有上下1em的margin，但相臨的p只會顯示1em的間隔而不是2em。

本例中兩個div是父子關(guān)系，并且沒有padding-top和border-top，即父元素和子元素上邊重合。也屬于毗鄰的范疇，所以也出現(xiàn)了margin折疊，本例顯示了子元素的margin-top；

?詳細(xì)的margin重合計算可以參考這篇：http://www.cr173.com/html/17041_1.html

避免這個問題只要使條件不符合或者隱藏margin：給父元素加padding/border,父子間添加其他元素，或者設(shè)置為浮動，定位都行。

IE中的情況還沒有具體測試過，后面補(bǔ)全。

總結(jié)

以上是生活随笔為你收集整理的margin折叠-从子元素margin-top影响父元素引出的问题的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。