資訊專欄INFORMATION COLUMN
摘要：兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。兩個外邊距一正一負時，折疊結果是兩者的相加的和。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個多帶帶的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
1. 折疊的結果兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
2. 條件產生折疊的必備條件：margin必須是鄰接的
而根據w3c規范，兩個margin是鄰接的必須滿足以下條件：
必須是處于常規文檔流（非float和絕對定位）的塊級盒子，并且處于同一個BFC當中。
沒有線盒，沒有空隙（clearance，下面會講到），沒有padding和border將他們分隔開
都屬于垂直方向上相鄰的外邊距，可以是下面任意一種情況
元素的margin-top與其第一個常規文檔流的子元素的margin-top
元素的margin-bottom與其下一個常規文檔流的兄弟元素的margin-top
height為auto的元素的margin-bottom與其最后一個常規文檔流的子元素的margin-bottom
高度為0并且最小高度也為0，不包含常規文檔流的子元素，并且自身沒有建立新的BFC的元素的margin-top和margin-bottom
2.1 條件解讀創建了新的BFC的元素（例如浮動元素或者"overflow"值為"visible"以外的元素）與它的子元素的外邊距不會折疊
浮動元素不與任何元素的外邊距產生折疊（包括其父元素和子元素）
絕對定位元素不與任何元素的外邊距產生折疊
inline-block元素不與任何元素的外邊距產生折疊
一個常規文檔流元素的margin-bottom與它下一個常規文檔流的兄弟元素的margin-top會產生折疊，除非它們之間存在間隙（clearance）。
一個常規文檔流元素的margin-top 與其第一個常規文檔流的子元素的margin-top產生折疊，條件為父元素不包含 padding 和 border ，子元素不包含 clearance。
一個 "height:auto" 并且 "min-height:0"的常規文檔流元素的 margin-bottom 會與其最后一個常規文檔流子元素的 margin-bottom 折疊，條件為父元素不包含 padding 和 border ，子元素的 margin-bottom 不與包含 clearance 的 margin-top 折疊。
一個不包含border-top、border-bottom、padding-top、padding-bottom的常規文檔流元素，并且其 "height" 為 0 或 "auto"， "min-height:0"，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 會折疊。
注意：
浮動元素和絕對定位元素不與其他盒子產生外邊距折疊是因為元素會脫離當前的文檔流，違反了上面所述的兩個margin是鄰接的條件同時，又因為浮動和絕對定位會使元素為它的內容創建新的BFC，因此該元素和子元素所處的BFC是不相同的，因此也不會產生margin的折疊。
但是浮動元素脫離了當前的BFC并不影響它后面的兄弟元素，后面的兄弟元素與浮動元素前面的元素依然在同一個BFC當中，所以，它們之間的margin還是會折疊的。
2.2 空隙 clearance當浮動元素之后的元素設置clear以閉合相關方向的浮動時，根據w3c規范規定，閉合浮動的元素會在其margin-top以上產生一定的空隙（clearance），該空隙會阻止元素margin-top的折疊，并作為間距存在于元素的margin-top的上方。關于這個間距的計算稍微有點復雜，但實際工作中你并不需要去計算它。
3. 如何解決使用BFC解決margin合并問題可以參考這篇文章：CSS中重要的BFC
3.1 自身margin合并的情況加個padding或者border-top/border-bottom
3.2 相鄰元素的情況相鄰元素中間添加一個1px的間隔元素(不推介，因為添加了冗余標簽)
相鄰元素加上display: inline-block; 或者grid與inline-grid后相鄰元素之間的垂直外邊距不會合并，不過注意grid的瀏覽器兼容性不太好。
相鄰元素可以在其中一個元素外面包一層div，并設置任何能觸發BFC的屬性即可。codepen的DEMO
浮動與絕對定位之類脫離文檔流的元素不發生margin合并
3.3 父子元素的情況給父元素添加padding-top值，缺點：增加了一點padding的誤差
給父元素添加border值，比如border-top:1px solid transparent;，缺點同上
給父元素或者子元素聲明浮動float，缺點：float有時是不必要的。
使父元素或子元素聲明為絕對定位：position:absolute/fixed;
給父元素添加屬性 overflow:auto/auto/scroll;
子元素的margin使用父元素的padding代替
網上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學習過程中的總結，如果發現錯誤，歡迎留言指出~
參考：
CSS外邊距合并的問題
深入理解css中的margin屬性
深入理解BFC和Margin Collapse
PS：歡迎大家關注我的公眾號【前端下午茶】，一起加油吧~
另外可以加入「前端下午茶交流群」微信群，長按識別下面二維碼即可加我好友，備注加群，我拉你入群～
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115788.html
? 深入css布局(3) — margin問題與格式化上下文 ? ???? 在css知識體系中，除了css選擇器，樣式屬性等基礎知識外，css布局相關的知識才是css比較核心和重要的點。今天我們來深入學習一下css布局相關的知識。 ? css布局篇已經講個2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動等知識點。今天呢，我們把css布局篇做一個結尾，最后...
摘要：外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。 外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。 首先看下W3C對于外邊距合并的介紹： 外邊距合并...
摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...
摘要：盒子模型我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的，但是我們算元素的總寬度或者總高度的時候，要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子，盒子里面又裝著小盒子，小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p，也可以把它抽象成為一個盒子...
摘要：的特性始終是透明的。例如就等于如果只有兩個值，第一個值表示上下值，第二個值為左右的值。垂直外邊距合并問題外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。 Margin的特性 margin始終是透明的。 margin通過使用單獨的屬性，可以對上、右、下、左的外邊距進行設置。即：margin-top、marg...
閱讀 3398·2023-04-25 22:04
閱讀 2196·2021-11-22 15:29
閱讀 2161·2021-10-11 10:57
閱讀 1402·2021-09-24 09:48
閱讀 3147·2021-09-09 09:34
閱讀 2543·2021-09-02 15:21
閱讀 2393·2019-08-30 15:53
閱讀 1120·2019-08-30 14:07
