CSS盒子模型中外邊距（margin）摺疊詳解

最近寫專案過程中遇到乙個css盒子模型中外邊距（margin）摺疊的情況，搞得我焦頭爛額，之後再網上查閱了大量的資料，現做乙個整理和總結，方便以後忘記的時候查閱，同時也供廣大網友參考。如有錯誤或者總結方面不全的地方，歡飲廣大網友指出。

外邊距摺疊的概念：所謂外邊距摺疊就是相鄰的兩個或多個元素（含有子元素的情況）的外邊距會在垂直方向上合併成乙個乙個外邊距。

css盒子模型中外邊距（margin）摺疊的常見情形有如下2種：

情況1、無子元素的相鄰兄弟元素

觸發margin摺疊的條件：兩個元素之間沒有被其他非空元素隔開時觸發外邊距摺疊。

情形說明：

1）如果兩個元素的margin均為正值，則兩個元素之間的margin=max(margin1,margin2)；

附圖說明：

2）如兩個元素的margin負值，則兩者之間的margin=min(margin1,magin2)，如圖2 所示;

附圖說明：

3）如果兩個元素中有margin為正值，有乙個為負值，則兩者之間的margin=margin1+margin2，如圖三中所示margin=-50px+25px=-25px;

情況2、子元素與父元素發生外邊距摺疊

觸發條件：父元素無外邊框(border)、無內邊距(padding)，且父元素與子元素之間無非空元素或文字資訊時（子元素上邊與父元素上邊之間無非空元素文字資訊，子元素下邊與父元素下邊之間可可以有非空元素和文字資訊），摺疊的基線為父元素最上的邊或最下的邊。

情形說明：

1）若父元素與子元素的margin值均為正，則摺疊後的margin=max(margin1,margin2)，如圖四所示。

附圖說明：

2）若父元素與子元素的margin值均為負，則摺疊後的margin=min(margin1,margin2)，如圖五所示。

3）若父元素與子元素的margin其中有乙個為正值，乙個為負值，則摺疊後的margin=minmargin1+margin2，如圖六所示。