這個(gè)問題是CSS2.1的盒模型中規(guī)定的內(nèi)容——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.
所有毗鄰的兩個(gè)或更多盒元素的margin將會(huì)合并為一個(gè)margin共享之靶擦。毗鄰的定義為：同級(jí)或者嵌套的盒元素扶檐，并且它們之間沒有非空內(nèi)容、Padding或Border分隔草丧。
這就是原因了漾岳。“嵌套”的盒元素也算“毗鄰”聂薪，也會(huì) Collapsing Margins。
這個(gè)問題的避免方法很多蝗羊，只要破壞它出現(xiàn)的條件就行藏澳。給Outer Div 加上 padding/border，或者給 Outer Div / Inner Div 設(shè)置為 float/position:absolute(CSS2.1規(guī)定浮動(dòng)元素和絕對(duì)定位元素不參與margin折疊)耀找。
更多信息翔悠，關(guān)于不同值的margin折疊后表現(xiàn)的計(jì)算方法等等业崖，可自行查閱。
- 相關(guān)鏈接：
