資訊專欄INFORMATION COLUMN
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。
外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下
前文
這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。
從一個簡單例子說起
先看一個簡單示例：
`<``style``>`
`.slide1 div {`
`margin:10px 0;`
`}`
``
`<``div` `class``=``"slide1"``>`
`<``h3``>第1種外邊距折疊：兄弟元素`
`<``p``>文本上下間距10px`
`<``p``>文本上下間距10px`
``
看這個例子中的兩個p標簽，根據樣式定義：第一個p的margin-bottom和第二個p的margin-top?都是10px，那實際距離應該等于20px才對，但是用瀏覽器查看一下可以發現，最終的邊距是10px。 這個例子就是外邊距折疊：塊級元素的上外邊距和下外邊距有時會合并（或折疊）為一個外邊距。
分類情況
外邊距折疊有3種基本情況：
相鄰元素
父元素和第一個子元素（或者最后一個子元素，等下記得回頭思考下這里為啥是第一個或者最后一個）
空的塊級元素
先不急著記憶，首先，前文的例子中就是第一種情況--相鄰的兩個元素之間發生的外邊距折疊。
第二種和第三種情況如下：
`<``style``>`
`.father {`
`background-color: green;`
`}`
`.child {`
`margin-top: 50px;`
`background-color: red;`
`height: 300px;`
`}`
`.slide3 {`
`margin: 10px 0;`
`}`
``
`<``h3``>第2種外邊距折疊：父元素和首個子元素`
`<``div` `class``=``"slide2 father"``>`
``
`<``div` `class``=``"slide2 child"``>`
``
``
``
`<``h3``>第3種外邊距折疊：空的塊級元素`
`<``div` `class``=``"slide3"``>`
}//歡迎加入全棧開發交流劃水交流圈：582735936
]//面向劃水1-3年前端人員
} //幫助突破劃水瓶頸，提升思維能力
他們的圖像也分別如圖：
情況2： 子元素的外邊距會“轉移”到父元素的外面
情況3：該元素的上下外邊距會折疊
好了，到這里我們不妨來看看這幾種情況的共同點（建議畫一下他們的盒模型，我懶就不畫了-_-）,可以發現發生外邊距折疊的共同原因：margin之間直接接觸，沒有阻隔。
如何理解直接接觸？很簡單：
第一個例子中，兩個
標簽的垂直方向margin是直接接觸的；
第二個例子中，由于父元素的padding,border都為0，所以margin和它的子元素也是直接接觸的。（這個例子畫出盒模型就很好理解）
第三個例子中，空元素本身的上下邊距也是直接接觸的（padding,border也是0）
各種情況下折疊的結果
折疊后的邊距如何計算，這個可以簡單驗證下：
如果兩個外邊距都是正值，折疊后的邊距取較大的一個
如果兩個邊距一正一負，折疊后的邊距為邊距之和
如果兩個邊距都為負數，折疊后邊距為較小的邊距之和
如何防止外邊距折疊
前文說到，發生外邊距折疊的原因是，外邊距直接接觸，因此防止折疊的方式就是，阻隔這個直接接觸，組合的方法包括：
嵌套情況只要border padding?非0，或者有inline元素隔開，比如父元素里加一行文字也可以（可以直接在情況2嘗試）
任何借助bfc形成阻隔的方式，如浮動，display:table等（BFC不熟悉的同學先查查，我后面補上）
小結
還得補充一下，前面討論的是基本情況，在基本情況下還可以進行組合，比如多個相鄰元素之間；多層后代元素嵌套等等，弄明白基本原理，其他情況只要寫寫小的demo驗證下就很好理解了。然后是慣例：如果內容有錯誤的地方歡迎指出（覺得看著不理解不舒服想吐槽也完全沒問題）；
以上就是本文的全部內容，希望對大家的學習有所幫助，
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99707.html
摘要：發生外邊距折疊的條件是什么垂直方向上相鄰的兩個元素這種情況很好理解，就是上面的例子中給出的情況。外邊距折疊后的大小兩個相同大小的正數取某個外邊距的值。即與發生折疊，折疊后的值為。根據塊級格式化上下文來阻止外邊距折疊。 什么是外邊距折疊 準確來說，外邊距折疊應該叫垂直外邊距折疊，因為只會發生在垂直方向上，而水平方向上不會發生。 對于以下簡單的html代碼和css代碼， 請問top塊和bo...
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...
摘要：這個例子就是外邊距折疊塊級元素的上外邊距和下外邊距有時會合并或折疊為一個外邊距。 外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現，分為3種情況，非常具有實用價值，需要的朋友可以參考下 前文 這是的一個經典的老問題，因為之前剛好有讀者朋友問到，順便整理一下。 從一個簡單例子說起 先看一個簡單示例： `` `.sli...
摘要：如圖所示代表，代表，代表。以上例子中，和之間的折疊產生的，是個相鄰折疊的結果。將其值分為兩組正值，，負值，，根據有正有負時的計算規則，正值的最大值為，負值中絕對值最大的是，所以，最終折疊后的應該是。 盒模型的構成 之前寫了一篇關于如何解決css的外邊距重疊問題,可是后來發現,我有些本末倒置了,對于一個問題的正確的處理流程就應該是先發現問題,分析問題,解決問題,所以我在這篇文章中就對下c...
閱讀 1830·2021-11-11 16:54
閱讀 2056·2019-08-30 15:56
閱讀 2365·2019-08-30 15:44
閱讀 1282·2019-08-30 15:43
閱讀 1856·2019-08-30 11:07
閱讀 812·2019-08-29 17:11
閱讀 1464·2019-08-29 15:23
閱讀 3007·2019-08-29 13:01
