---恢復內容開始---
在css2.1盒模型中
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分隔。
父元素的子元素的上邊距margin-top如果碰不到有效的border或者padding，他們之前會共享（父元素會有margin-top）。所以會出如上的問題。同級的盒元素滿足上面的條件也會出現這個情況。
解決方案：
1.為父元素例子中的middle元素增加乙個border-top或者padding-top即可解決這個問題
2.子元素使用浮動或者絕對定位absolute
3.父級overflow:hidden（共享的意思是margin-top看上去父子都有，但其實還是在子上，overflow讓子元素超出父元素部分隱藏即mrgin-top隱藏，但是達不到父元素與子元素分割開的效果，不推薦）
css子元素的margin top為何會影響父元素
詳細內容 這個問題困惑了很久，雖然沒有大礙早就摸出來怎麼搞定它，但始終不明白原因出在 如果只是ie有問題我也不會太在意，可問題是所有上等瀏覽器都表現如此，這樣叫我怎能安心？今天總算下狠心查出來怎麼回事，居然是css2.1盒模型規範 雖然很彆扭，非常彆扭的規定。問題如下圖，兩層div結構，outer ...
子元素設定margin top，父元素也受影響
外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 firffox chrome opera sarfi 產生問題，ie下反而表現良好。例子可以檢視下面 ie下表現 正常 標準瀏覽器下檢視出現 bug 效果如下圖 解決辦法是 給父元素加個p...
子元素設定margin top，父元素也受影響
這個問題困惑了非常久。儘管沒有大礙早就摸出來怎麼搞定它。但始終不明確原因出在 假設僅僅是ie有問題我也不會太在意。可問題是全部上等瀏覽器都表現如此，這樣叫我怎能安心？今天總算下狠心查出來怎麼回事，竟然是css2.1盒模型規範 儘管非常彆扭，非常彆扭的規定。問題例如以下。兩層div結構。outer d...