最近做了個專案，居然在乙個小小的css問題上折騰了很久很是
糾結——外邊距摺疊的問題。今天難得清閒，就把這個問題研究了一下，才發現大有學問，所以寫篇博文整理一下，以便更加牢記！
外邊距摺疊，指的是
毗鄰的兩個或多個外邊距 (margin) 在垂直方向會合併成乙個外邊距。
觸發條件：
毗鄰，沒有被非空內容、padding、border或clear分隔開的margin特性.非空內容就是說這元素之間要麼是兄弟關係或者父子關係
這些 margin 都
處於普通流中，即非浮動元素，非定位元素
垂直方向外邊距合併的計算
1) 參加摺疊的margin都是正值：取其中 margin 較大的值為最終 margin 值。
<示意圖：div
style
="height:50px; margin-bottom:50px; width:50px; background-color: red;"
>a
div>
<
div
style
="height:50px; margin-top:100px; width:50px; background-color: green;"
>b
div>
2). 參與摺疊的 margin 都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移。
<示意圖：div
style
="height:100px; margin-bottom:-75px; width:100px; background-color: red;"
>a
div>
<
div
style
="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;"
>b
div>
3). 參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值中最大的，然後，和正 margin 值中最大的 margin 相加。
<示意圖：div
style
="height:50px; margin-bottom:-50px; width:50px; background-color: red;"
>a
div>
<
div
style
="height:50px; margin-top:100px; width:50px; background-color: green;"
>b
div>
4). 相鄰的 margin 要一起參與計算，不得分步計算
要注意，相鄰的元素不一定非要是兄弟節點，父子節點也可以，即使不是兄弟父子節點也可以相鄰。
而且，在計算時，相鄰的 margin 要一起參與計算，不得分步計算。
<錯誤的計算方式：算 a 和 b 之間的 margin，分別算 a 和其父元素的摺疊，然後與其父元素的父元素的摺疊，這個值算出來之後，應該是 90px。依此法算出 b 的為 80px；然後，a和b摺疊，margin 為 90px。div
style
="margin:50px 0; background-color:green; width:50px;"
>
<
div
style
="margin:-60px 0;"
>
<
div
style
="margin:150px 0;"
>a
div>
div>
div>
<
div
style
="margin:-100px 0; background-color:green; width:50px;"
>
<
div
style
="margin:-120px 0;"
>
<
div
style
="margin:200px 0;"
>b
div>
div>
div>
請注意，多個 margin 相鄰摺疊成乙個 margin，所以計算的時候，應該取所有相關的值一起計算，而不能分開分步來算。
以上例子中，a 和 b 之間的 margin 摺疊產生的 margin，是6個相鄰 margin 摺疊的結果。將其 margin 值分為兩組：
正值：50px，150px，200px
負值：-60px，-100px，-120px
根據有正有負時的計算規則，正值的最大值為 200px，負值中絕對值最大的是 -120px，所以，最終摺疊後的 margin 應該是 200 + (-120) = 80px。
5). 浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊
<示意圖：div
style
="margin-bottom:50px; width:50px; height:50px; background-color:green;"
>a
div>
<
div
style
="margin-top:50px; width:100px; height:100px; background-color:green; float:left;"
>
<
div
style
="margin-top:50px; background-color:gold;"
>b
div>
div>
6). 建立了塊級格式化上下文1的元素，不和它的子元素發生 margin 摺疊
以 「overflow : hidden」 的元素為例：
<若 b 和它的 "overflow:hidden" 包含塊發生 margin 摺疊的話，金色的條應該位於綠色塊的最上方，否則，沒有發生。div
style
="margin-top:50px; width:100px; height:100px; background-color:green; overflow:hidden;"
>
<
div
style
="margin-top:50px; background-color:gold;"
>b
div>
div>
示意圖：
7). 元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊
自身 margin-bottom 和 margin-top 相鄰，只能是自身內容為空，垂直方向上 border、padding 為 0。
<以上**執行後，我們講得到的是紅色邊框的正方形，方框的寬高都應該是 100px，高度不應該是 150px。div
style
="border:1px solid red; width:100px;"
>
<
div
style
="margin-top: 100px;margin-bottom: 50px;"
>
div>
div>
示意圖：
css 盒模型的外邊距
外邊距 margin 外邊距不會影響盒子可見框的大小 但是外邊距會影響盒子的位置 一共有四個方向的外邊距 margin top 上外邊距，設定乙個正值，元素會向下移動 margin right 預設情況下設定margin right不會產生任何效果 margin bottom 下外邊距，設定乙個正值...
框模型之外邊距 margin 摺疊
首先回顧一下margin的特性 現在重點來看下外邊據摺疊的情況。collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 margin 會合併成乙個外邊距。其中所說的 margin 毗鄰，可以歸結為以下兩點 下面詳細的介紹其規則。兩個或多個 說明其數量必須是大於乙個，又說明，...
關於css中的邊框 內邊距 外邊距
使用width來設定盒子內容區的寬度 使用height來設定盒子內容區的高度 width和height只是設定的盒子內容區的大小，而不是盒子的整個大小，盒子可見框的大小由內容區，內邊距和邊框共同決定 為元素設定邊框 要為乙個元素設定邊框必須指定三個樣式 border width 邊框的寬度 bord...