已知兩個寬和高均為100px，margin均為20px的div垂直排列，現象如下圖所示：
當設定css1的margin-bottom：40px；或者css2的margin-top：40px時，現象如下圖所示：
結論：只有當兩個垂直排列的盒子的垂直外邊距挨在一起時會產生合併問題，此問題也不需要解決，記住誰的外邊距較大就採用誰的外邊距就ok了。
水平排列的盒子不存在合併的問題。
下面實驗證實：
分別設定兩個盒子不同的顏色
*/.div1
.div2
style
>
head
>
<
body
>
<
div
class
="div1"
>css1
div>
<
div
class
="div2"
>css2
div>
body
>
html
>
現象為：
乙個寬高均為200px的div1內嵌乙個寬高均為100px的div2，當給div2設定margin：30px時，現象為：
此時外面的這個大的div的margin也變成了30px，下面這段解決此問題：
需要在大的div中寫入
overflow: hidden;這句**可以理解為讓瀏覽器顯示該div的時候檢查一下是否有問題，如果有問題，瀏覽器來解決。第二種解決辦法見上面的**。
最後的現象為：
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...
CSS 外邊距合併
做了個div 巢狀div的實驗，父div和子div都有margin邊距 發現margin top 10px 根本不起作用，後來發現是外邊框合併問題，他會合併取兩者大的邊距，如果子div的邊距是30px 那麼父子div還是會貼著 只是，父div外邊距會變成30的效果 外邊距合併指的是，當兩個垂直外邊距...