資訊專欄INFORMATION COLUMN
摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發外邊距折疊。
最近寫項目過程中遇到一個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;
觸發條件：父元素無外邊框(border)、無內邊距(padding)，且父元素與子元素之間無非空元素或文本信息時（子元素上邊與父元素上邊之間無非空元素文本信息，子元素下邊與父元素下邊之間可可以有非空元素和文本信息），折疊的基線為父元素最上的邊或最下的邊。
情形說明：
1）若父元素與子元素的margin值均為正，則折疊后的margin=max(margin1,margin2)，如圖四所示。
附圖說明：
2）若父元素與子元素的margin值均為負，則折疊后的margin=min(margin1,margin2)，如圖五所示。
3）若父元素與子元素的margin其中有一個為正值，一個為負值，則折疊后的margin=minmargin1+margin2，如圖六所示。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112368.html
摘要：盒子模型中外邊距折疊的常見情形有如下種情況無子元素的相鄰兄弟元素觸發折疊的條件兩個元素之間沒有被其他非空元素隔開時觸發外邊距折疊。 最近寫項目過程中遇到一個CSS盒子模型中外邊距（margin）折疊的情況，搞得我焦頭爛額，之后再網上查閱了大量的資料，現做一個整理和總結，方便以后忘記的時候查閱，同時也供廣大網友參考。如有錯誤或者總結方面不全的地方，歡飲廣大網友指出。 外邊距折疊的概念：所...
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...
閱讀 2951·2021-11-25 09:43
閱讀 3327·2021-11-24 09:39
閱讀 2828·2021-09-22 15:59
閱讀 2174·2021-09-13 10:24
閱讀 509·2019-08-29 17:02
閱讀 2098·2019-08-29 13:23
閱讀 3058·2019-08-29 13:06
閱讀 3539·2019-08-29 13:04
