詳細內容
這個問題困惑了很久，雖然沒有大礙早就摸出來怎麼搞定它，但始終不明白原因出在**，如果只是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。
解決辦法比較多：
1、給父級加overflow:hidden或padding、border;
2、使用padding代替margin
更多html5內容
css父元素和子元素之間margin top的問題
問題 父元素的盒子包含乙個子元素盒子，給子元素盒子乙個垂直外邊距margin top，父元素的盒子也會受到子元素的margin top值的影響。原因 所有毗鄰的兩個或者多個元素的margin將會合併為乙個margin共享之。毗鄰的定義為 同級或者巢狀的盒元素，並且它們之間沒有非空內容。padding...
行內元素和與行內塊元素的margin top問題
內聯 行級 元素 不能設定寬高，但padding屬性可以設定，需要注意的是行級元素不能設定margin top和margin bottom屬性，但可以設定margin left和margin right屬性。如果需要設定行級元素的margin top或margin bottom屬性，必須將行級元素轉...
css子元素繼承父元素屬性
樣例 ant design form表單中label樣式的修改 css屬性繼承 文字 color 顏色，a元素除外 direction 方向 font 字型 font family 字型系列 font size 字型大小 font style 用於設定斜體 font variant 用於設定小型大寫...