聽聞html+css甚是簡單，誰知這麼多坑要爬；
1. 外邊距疊加1
對於兩個相鄰元素的margin-bottom和margin-top會疊加，大家應該很熟悉（好像很多觀眾的樣子，你這裝逼犯，哈哈哈哈！）；也就是說當乙個元素出現在另乙個元素上面時，第乙個元素的底外邊距與第二個元素的頂外邊距發生疊加，他們之間的外邊距為兩個元素外邊距中的較大者。
例如：div1的margin-bottom為10px；div2的margin-top為20px，那麼他們之間的「距離」為20px；準確的說應該是這兩個div形成的盒模型之間的距離為20px；這個很好理解；
2. 外邊距疊加2（坑1）
一定要大聲唸出這句話三遍、三遍、三遍：當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框將外邊距分隔開），他們的頂或底外邊距也會發生疊加。（檢視《精通css》p41）為了爬這個坑，我面壁思過幾個小時，我容易嗎我
例如：
排程後續事件
按照我們想當然的理解，first與second之間的間距應該只有1em(因為p元素之間的預設margin是1em）
按照我們想當然的理解，p元素應該位於second框往下50px處（margin-top的緣故），
但是，因為second與p標籤的margin-top發生疊加，導致p的margin-top疊加到second的margin-top上，所以first與second的距離為50px。
如上圖，first與second的距離為50px；這是因為second中的p元素的margin-top與second的margin-top發生疊加導致；這時我們只需要將second設定內邊距或邊框將外邊距分隔開就可以了
排程後續事件
按照我們想當然的理解，first與second之間的間距應該只有1em(因為p元素之間的預設margin是1em）
padding: 1px;">
按照我們想當然的理解，p元素應該位於second框往下50px處（margin-top的緣故），
但是，因為second與p標籤的margin-top發生疊加，導致p的margin-top疊加到second的margin-top上，所以first與second的距離為50px。
如上一切正常。。
3. 外邊距疊加3（坑2）
同樣是《精通css》中的p41，這真是一本好書呀！
注意坑來了：外邊距可以與本身發生疊加。假設有乙個空元素，它有外邊距，但是沒有邊框或內邊距。在這種情況下，頂外邊距與底外邊距就會搞基，兩個合二為一，疊加到一起，距離取其中較大的那個。
CSS外邊距疊加問題
css外邊距疊加就是margin collapse，邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距,水平邊 距永遠不會重合。重疊結果計算規則 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩個之間較大的值.兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值.兩個邊距一正一負時，摺疊結...
CSS外邊距疊加
盒模型概念 盒模型是css的基石之一，它指定元素如何顯示及 在某種程度上 如何相互互動。頁面上的每乙個元素都被看做乙個矩形框，這個框右元素的內容 內邊距 邊框和外邊距組成，如下圖 如果給元素新增背景，背景會應用於內容和內邊距組成的區域。新增邊框會在內邊距的區域外加一條線。外邊距是透明的，一般使用它控...
CSS外邊距疊加
外邊距疊加發生在上下外邊距之間，左右外邊距不會發生疊加的情況 疊加之後的外邊距高度等於發生疊加之前兩個外邊距中的最大值 外邊距疊加有三種情況 1 同級元素之間 當乙個元素出現另乙個元素的上面的時候，第乙個元素的下邊距會和將會與第二元素的上邊距會發生合併 2 父子元素之間 父元素與子元素之間的上下外邊...