之所以要專門寫一篇文章去解釋margin重疊，一是因為前面的文章裡有提到過，怕有些童鞋不了解；二是要寫的內容不是三言兩語就能說清楚的。
在講重疊之前，我們先來了解一下margin這個屬性。
這個屬性呢，太常見，我就大概講講，有幾點大家注意一下就好。
margin, 實為margin-left, margin-right, margin-top, margin-bottom的乙個簡寫，這些子屬性分別用來設定box的左 / 右 / 上 / 下外邊距的寬度，它們的具體用法如下：
屬性名: margin-left / margin-right / margin-top / margin-bottom有一些使用細節需要說明一下：值: | | inherit
初始值: 0
繼承性: 無
應用物件：所有dom元素，除了display為table-row-group,table-row, table-column-group, table-column, table-header-group, table-footer-group, table-cell寬度
計算值（
computed value，參考第4條）：開發人員指定的百分比值 或 乙個絕對長度
margin:20px; 等同於 所有邊均為20px
margin:10px 20px; 等同於 margin-top & margin-bottom為10px, margin-left & margin-right為20px
margin:10px 20px 30px; 等同於 margin-top為10px, margin-left & margin-right為20px, margin-bottom為30px
margin:10px 20px 30px 40px; 等同於 margin-top為10px,margin-right為20px,margin-bottom為30px,margin-left為40px複製**
嗯哼~蠻簡單的~~那就來點複雜的吧！
何為margin重疊？兩個或多個box的相鄰margin合在一起，成為乙個margin。其實就是兩個margin重疊在一塊，那麼呈現出來的效果當然是乙個的咯。
如何才能產生這種效果呢？
首先，你得保證用的是垂直方向的margin（margin-top & margin-bottom）。你要是用margin-left和margin-right，試一百次都不會出現！
其次，應用物件要選好。不是所有box都可以！（突然覺得css裡的規則一套一套的，水好深~~）
最後，重疊的環境要準備好。即使物件選好了，重疊也不是百分百就有，只有滿足特定的條件才會產生。
在我說出之前，大家可以先想想哪些物件會有margin重疊。
我們可以試試排除法。css中的box無非就四種：float box，absolute positioned box，inline-level box， block-level box。
看過前面的定位文章的童鞋應該知道，float box和absolute positioned box都會脫離正常流而自成一條流，流與流之間是各玩各的，互不干擾，那麼我們可以先排除這兩種。而inline-level box在渲染過程中會參與inline formatting context，這個上下文中的box不會發生margin重疊。那麼剩下的只有block-level box。
那麼，所有的block-level box都會發生重疊嗎？
是的，但是——要排除root box（第28條）。
現在，我們大致知道重疊物件會是兩個block-level box(不包括root box)。這只是乙個初篩條件，這兩個重疊物件還必須同屬乙個block formatting context，具體為什麼呢，看看之前介紹bfc的文章就明白了。
對於乙個符合條件的box而言，以下任何一種情況都會發生重疊：
top margin 與 它的第乙個處於普通流中的孩子的top margin
height 為auto，它的bottom margin 與 它的最後乙個處於普通流中的孩子的bottom margin
bottom margin 與 它的下乙個處於普通流中的兄弟的top margin
overflow為visible（即該box不會建立bfc）, min-height 的computed value(第四條)為0，height的computed value為0或auto，無孩子box，它的top margin與bottom margin
特例：overflow不為visible的block-level box的margin不會與它的任何在普通流中的孩子發生margin 重疊，但可與處在同一bfc的兄弟box發現margin 重疊。
我們來看看示例：
例1：父box與第乙個子孩子box
'parent'>
'child first'>haha
複製**
chrome瀏覽器顯示：
很明顯，兩者margin發生重疊。
例2：box自身的top margin與bottom margin發生重疊 &&兄弟box之間margin重疊 && overflow不為visible的box不與孩子box發生margin重疊
'parent'>
'parent parent-second'>
'child first-child'>haha in second div
'child second-child'>lala in second div
複製**
chrom顯示如下：
我們看第乙個 div.parent ，它的top margin與bottom margin發生重疊，這個重疊結果又與div.parent.second-parent的top margin發生重疊，所以頁面最上方的空白處margin只有20px，這個數值可以通過檢視div.parent.second-parent的margin得到（下圖的橙色部分）。
由上圖，我們也可以看到，div.parent.second-parent並未與自己的第乙個孩子box發生margin 重疊。
假設第乙個box的top margin值為a，它的第乙個子孩子的top margin值為b，兩者margin重疊，重疊結果會按如下規則計算：
a，b均為正值，則取max(a, b)來個例子a為負值，b為正值，則為b-|a|
a，b均為負值，則取0-max(|a|，|b|)
為了更好的展示重疊結果，將html元素的top margin設為100px（注：html元素產生的是root box，不會發生margin重疊），同時去掉瀏覽器為body設定的margin。
'parent'>
'child'>haha
複製**
chrome展示如下：
例3：a為負值，b為正值
為div.parent及div.child加上margin-top
.parent
.child複製**
chrome裡顯示如下：
用inspect方式檢視margin的範圍：
可以看到，重疊margin值為html元素所設margin值的一半，即50px。它背後的運算過程是：10-|-60| = -50
例4：a, b均為負值
為兩個div加上margin-top
.parent
.child複製**
chrome顯示如下：
再檢視下margin範圍
margin重疊的結果依然為50px，但背後的運算卻不同，0 - max(|-10|, |-50|) = 0-50 = -50
小結：只有垂直margin才可重疊，且參與的物件為同乙個bfc的block-level box；重疊只有滿足特定的條件才會發生；重疊的計算因margin值的正負情況而有所不同。
你會跑步嗎？
跑步應該是每個人與生俱來的本領，除了嬰兒和有腿疾的人，誰都可以邁開腿跑起來。跑步也是最容易開展起來的運動，只要有一雙跑鞋，不拘泥於場地，就可以進行，甚至有些 赤腳大仙 光著腳丫就可以跑起來。然而，你會跑步嗎？不知道你有沒有聽過一句話 跑步百利唯傷膝。在我的周圍，也有不少的人對我說，不要跑步，跑多了，...
你會休息嗎
為什麼你睡了11個小時仍然覺得疲累？為什麼你花了好幾萬去島國度假並沒有增加生活的熱情？都說要去ktv，去夜店，去遊樂園就能忘掉不快，更帶勁地開始新的一天，但是盡興歸來心裡只剩空虛？我們真的明白休息的含義嗎？我們休息對了嗎？你理解的休息是什麼？乙個飽覺？一陣瘋玩？到ktv釋放飯後的一串飽嗝？休息的真正...
你會休息嗎
為什麼你睡了11個小時仍然覺得疲累？為什麼你花了好幾萬去島國度假並沒有增加生活的熱情？都說要去ktv，去夜店，去遊樂園就能忘掉不快，更帶勁地開始新的一天，但是盡興歸來心裡只剩空虛？我們真的明白休息的含義嗎？我們休息對了嗎？你理解的休息是什麼？乙個飽覺？一陣瘋玩？到ktv釋放飯後的一串飽嗝？休息的真正...