這個問題困惑了很久，雖然沒有大礙早就摸出來怎么搞定它，但始終不明白原因出在哪里，如果只是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”效果。
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其實很常見，就是文章段落元素<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。
解決辦法比較多：
1、給父級加overflow:hidden或padding、border;
2、使用padding代替margin
來源：http://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html