轉(zhuǎn)載
外邊距折疊的幾種情況：
1郭毕、當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的底外邊距和第二個(gè)元素的頂外邊距發(fā)生疊加函荣，效果圖如下：
PS：這里的元素特質(zhì)塊級(jí)元素显押，inline元素豎向margin無效，display為inline-block的元素觸發(fā)了BFC也不會(huì)出現(xiàn)疊加傻挂，input乘碑，img之類的行內(nèi)替換元素也不會(huì)疊加
2、當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)金拒，他們的頂和底外邊距也會(huì)發(fā)生疊加兽肤，如下圖
3、外邊距也可以和本身發(fā)生疊加绪抛，前提有三個(gè)：空元素资铡，有外邊距，無內(nèi)邊距/邊框
PS：這條出現(xiàn)的情況比較難看直觀的看出來幢码，所以不太好理解
看下面兩段代碼：
<div id="emptyDiv" style="margin-top:30px;margin-bottom:20px">
</div>
<br>
<span id="spanA" style="background:green;">
通過chrome控制臺(tái)可以看出笤休，外邊距并沒有疊加</span>`
spanA的位置不是在emptyDiv下方50px的地方，而是30px的位置
<div id="emptyDiv" style="margin-top:10px;margin-bottom:20px"></div>
<span style="background-color: green;">通過chrome控制臺(tái)可以看出症副，外邊距并沒有疊加</span>
此時(shí)spanA的位置就在emptyDiv下方20px的地方店雅，因?yàn)樯舷逻吘喁B加了
4政基、如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并底洗，前提有四個(gè)：空元素腋么，有外邊距，無內(nèi)邊距/邊框亥揖，存在多個(gè)元素
看兩段代碼：
<div id="emptyDiv" style="margin-top:30px;margin-bottom:20px"></div>
<div id="divB" style="margin-top:20px;margin-bottom:20px;height:20px;
background-color: #0E2D5F">
</div>
通過chrome控制臺(tái)可以看出珊擂，divB被放置在emptyDiv下方30px的地方（只看這段你可能會(huì)認(rèn)為是divB的上邊距和emptyDiv的下邊距疊加了，其實(shí)不是這樣的）费变，再結(jié)合下一段代碼你就能完全明白了
<div id="emptyDiv" style="margin-top:30px;margin-bottom:20px"></``div``>`
<div id="divB" style="margin-top:50px;margin-bottom:20px;height:20px;
background-color: #0E2D5F"></div>
通過chrome控制臺(tái)可以看出摧扇，divB被放置在emptyDiv下方50px的地方，如果用“divB的上邊距和emptyDiv的下邊距疊加了”理解挚歧，divB將被放置在80px的地方扛稽，事實(shí)上這里只顯示出了50px，原因就是emptyDiv的上下邊距發(fā)生的疊加滑负。你也可以通過給emptyDiv加個(gè)邊框在张，再去掉會(huì)明顯看到divB位置的變化。
