這個問題困惑了很久，雖然沒有大礙早就摸出來怎麼搞定它，但始終不明白原因出在哪裏，如果只是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
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其實很常見，就是文章段落元素<p/>，並列很多個的時候，每一個都有上下1em的margin，但相鄰的<p/>之間只會顯示1em的間隔而不是相加的2em。這個很好理解，我就是奇怪爲什麼W3C要讓嵌套的元素也共享Margin，想不出來在什麼情況下需要這樣的表現。 這個問題的避免方法很多，只要破壞它出現的條件就行。給 Outer Div 加上 padding/border，或者給 Outer Div / Inner Div 設置爲 float/position:absolute(CSS2.1規定浮動元素和絕對定位元素不參與Margin摺疊)。 更多信息，關於不同值的margin摺疊後表現的計算方法等等，可自行查閱W3C的CSS2.1規範：Collapsing margins。