當塊級元素（block）的上外邊距(margin-top)
和下外邊距(margin-bottom)
同時都有設定時只會只會保留最大邊距，這種行為稱為邊界摺疊（margin collapsing），有時也翻譯為外邊距重疊。、
設定float
和position=absolute（包括固定定位fixed，但是relative不可以）的元素不會產生外邊距重疊行為（也就是父子元素都是標準流的時候會發生外邊距塌陷的問題）
只要父元素和子元素任何乙個元素設定了浮動或者絕對定位就不會發生外邊距塌陷的問題
例如：給定乙個父盒子和乙個子盒子
<div
class
="father"
>
<
div
class
="son"
>
div>
div>
.father .son只給子盒子乙個上外邊距，會發現父盒子跟隨子盒子一起有了乙個上外邊距，這就是外邊距塌陷
有三種情況會形成外邊距重疊：
相鄰的兩個元素之間的外邊距重疊，除非後乙個元素加上clear-fix清除浮動。
但是在一般情況下，垂直兩個盒子出現這種情況下，比較少（並列）形式出現，因為沒什麼必要，直接針對乙個來外邊距就好，何苦上面給一點，下面給一點外邊距。
如果沒有邊框border，內邊距padding，行內內容，也沒有建立塊級格式上下文或清除浮動來分開乙個塊級元素的上邊界或者 ." href="">margin-top與其內乙個或多個後代塊級元素的上邊界或者 ." href="">margin-top；或沒有邊框，內邊距，行內內容，高度height，最小高度min-height或 最大高度max-height來分開乙個塊級元素的下邊界或者 ." href="">margin-bottom與其內的乙個或多個後代後代塊元素的下邊界或者 ." href="">margin-bottom，則就會出現父塊元素和其內後代塊元素外邊界重疊，重疊部分最終會溢位到父級塊元素外面。
當乙個塊元素上邊界或者 ." href="">margin-top直接貼到元素下邊界或者 ." href="">margin-bottom時也會發生邊界摺疊。這種情況會發生在乙個塊元素完全沒有設定邊框border、內邊距paddng、高度height、最小高度min-height、最大高度max-height、內容設定為inline或是加上clear-fix的時候。
css的外邊距合併或者外邊距塌陷問題
已知兩個寬和高均為100px，margin均為20px的div垂直排列，現象如下圖所示 當設定css1的margin bottom 40px 或者css2的margin top 40px時，現象如下圖所示 結論 只有當兩個垂直排列的盒子的垂直外邊距挨在一起時會產生合併問題，此問題也不需要解決，記住誰...
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...