這個問題困惑了非常久。儘管沒有大礙早就摸出來怎麼搞定它。但始終不明確原因出在**，假設僅僅是ie有問題我也不會太在意。可問題是全部上等瀏覽器都表現如此，這樣叫我怎能安心？今天總算下狠心查出來怎麼回事，竟然是css2.1盒模型規範……儘管非常彆扭，非常彆扭的規定。
問題例如以下。兩層div結構。outer div屬性為「margin:0 auto」。本該緊貼外框頂部的，假設沒有inner div，或者沒有inner div的「margin-top」屬性，一切如預期。可是當inner div設定了「margin-top:10px」之後。它的父元素outer div也被撐出來乙個本不該有的「margin-top:10px」效果。
inner div [margin-top: 10px]
outer div [margin: 0 auto]
html demo area
這個「問題」……它是css2.1的盒模型中規定的內容——collapsing margins：
in this specification, the expression這就是原因了。collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 全部毗鄰的兩個或很多其它盒元素的margin將會合併為乙個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，而且它們之間沒有非空內容、padding或border分隔。
「巢狀」的盒元素也算「毗鄰」。也會 collapsing margins。
這個合併margin事實上非經常見，就是文章段落元素，並列非常多個的時候。每個都有上下1em的margin，但相鄰的之間僅僅會顯示1em的間隔而不是相加的2em。這個非常好理解，我就是奇怪為什麼w3c要讓巢狀的元素也共享margin，想不出來在什麼情況下須要這種表現。
這個問題的避免方法非常多，僅僅要破壞它出現的條件即可。給 outer div 加上 padding/border，或者給 outer div / inner div 設定為 float/position:absolute(css2.1規定浮動元素和絕對定位元素不參與margin摺疊)。
很多其它資訊。關於不同值的margin摺疊後表現的計算方法等等，可自行查閱w3c的css2.1規範：collapsing margins。
子元素設定margin top，父元素也受影響
外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 firffox chrome opera sarfi 產生問題，ie下反而表現良好。例子可以檢視下面 ie下表現 正常 標準瀏覽器下檢視出現 bug 效果如下圖 解決辦法是 給父元素加個p...
關於子元素的margin top影響父元素
來看看這個問題 子元素為什麼設定margin top會影響父元素的margin top。先把html,body,div的預設margin，padding設為0,再給父元素設定寬高，子元素設定寬高。然後又設定子元素的margin top為20px。效果如下 查了下，簡單來說是因為父元素沒有設定padd...
子元素的margin top會影響父元素
恢復內容開始 在css2.1盒模型中 in this specification,the expression collapsing margins means that adjoining margins no non empty content,padding or border areas o...