外邊距疊加其實是乙個非常簡單的概念，不過，一開始我還是被其高大上的名字（margin-collapsing）唬得不輕~
什麼是外邊距疊加呢？在normal流中，同一bfc下，相鄰垂直外邊距會重疊形成乙個外邊距，外邊距高度為疊加的外邊距較大者。（我是這樣記住的：盡量在滿足雙方的margin下，使得margin盡量貼近border、padding、內容。如果元素沒有border、padding、內容，塌得挺嚴重的~）
外邊距疊加的情況：
1. 2個垂直相鄰的元素，第乙個元素的底外邊距與第二個元素頂外邊距重疊
2.當乙個元素包含另乙個元素，若這兩元素之間無border，padding，則它們的垂直外邊距會疊加
3.元素的頂與底邊距在無內容，padding，border時也會疊加，已疊加的空元素之間也會疊加（例子：多個有margin的p元素沒有高度）
so~難道外邊距疊加是乙個bug，如果是，為何不在新版本的css中剔除它呢，我認為其實很多bug不是真正意義上的bug。而是我們用的不恰當，沒有深入了解css，所謂的bug不過是用錯了的方法，那外邊距坍塌為何出現呢？1.外邊距疊加使得元素之間的距離一致 2.使得空元素不會佔據過多不必要的空間 當然，第乙個原因意義大些，至少，儘量減少不必要的元素節點是我們的職責~
看出來了了嗎？這裡插多一句，可以看出body與html元素預設是不重合的，注意：absolute定位的最外層是基於的，而relative與static的最外層定位元素是~
CSS外邊距疊加
盒模型概念 盒模型是css的基石之一，它指定元素如何顯示及 在某種程度上 如何相互互動。頁面上的每乙個元素都被看做乙個矩形框，這個框右元素的內容 內邊距 邊框和外邊距組成，如下圖 如果給元素新增背景，背景會應用於內容和內邊距組成的區域。新增邊框會在內邊距的區域外加一條線。外邊距是透明的，一般使用它控...
CSS外邊距疊加
外邊距疊加發生在上下外邊距之間，左右外邊距不會發生疊加的情況 疊加之後的外邊距高度等於發生疊加之前兩個外邊距中的最大值 外邊距疊加有三種情況 1 同級元素之間 當乙個元素出現另乙個元素的上面的時候，第乙個元素的下邊距會和將會與第二元素的上邊距會發生合併 2 父子元素之間 父元素與子元素之間的上下外邊...
空白外邊距互相疊加
空白邊距疊加demo 這是乙個div元素內巢狀p的簡單樣例，看上面的 會以為是這樣的效果 在瀏覽器中開啟.你會驚訝的發現,它呈現給你的效果是這樣的 解決方法 一 為外圍元素定義透明邊框.具體到本例,即在樣式div中加入 border 1px solid transparent 注 在ie6裡面會產生...