塊的上外邊距(margin-top)和下外邊距(margin-bottom)有時(shí)合并(折疊)為單個(gè)邊距播瞳，其大小為單個(gè)邊距的最大值(或如果它們相等互艾，則僅為其中一個(gè))瞎领，這種行為稱為邊距折疊怔蚌。
注意：設(shè)定 float 和 position=absolute 的元素不會(huì)產(chǎn)生外邊距重疊行為别厘。
外邊距重疊的三種情況
- 同一層相鄰元素之間
相鄰的兩個(gè)元素之間的外邊距重疊怎棱，如下兩個(gè) p 標(biāo)簽的距離是 87px哩俭。
p:nth-child(1) {
margin-bottom: 13px;
}
p:nth-child(2) {
margin-top: 87px;
}
- 沒有內(nèi)容將父元素和后代元素分開
父塊元素和其內(nèi)后代塊元素外邊界重疊，重疊部分最終會(huì)溢出到父級塊元素外面拳恋。
這種情況發(fā)生在如果沒有邊框 border凡资，內(nèi)邊距 padding，行內(nèi)內(nèi)容诅岩，也沒有創(chuàng)建塊級格式上下文或清除浮動(dòng)來分開一個(gè)塊級元素的上邊界 margin-top 與其內(nèi)一個(gè)或多個(gè)后代塊級元素的上邊界 margin-top讳苦；或沒有邊框，內(nèi)邊距吩谦，行內(nèi)內(nèi)容鸳谜，高度 height，最小高度 min-height 或最大高度 max-height 來分開一個(gè)塊級元素的下邊界 margin-bottom 與其內(nèi)的一個(gè)或多個(gè)后代后代塊元素的下邊界 margin-bottom式廷。
如下
section {
margin-top: 13px;
margin-bottom: 87px;
}
header {
margin-top: 87px;
}
footer {
margin-bottom: 13px;
}
<section>
<header>上邊界重疊 87</header>
<main></main>
<footer>下邊界重疊 87 不能再高了</footer>
</section>
- 空的塊級元素
塊元素自身的上邊界 margin-top 與元素下邊界 margin-bottom 發(fā)生邊界折疊咐扭。
這種情況會(huì)發(fā)生在一個(gè)塊元素完全沒有設(shè)定邊框 border、內(nèi)邊距 padding、高度 height蝗肪、最小高度 min-height 袜爪、最大高度 max-height 、內(nèi)容設(shè)定為 inline 或是加上 clear-fix 的時(shí)候薛闪。
<p>上邊界范圍是 87 ...</p>
<div></div>
<p>... 上邊界范圍是 87</p>
p {
margin: 0;
}
div {
margin-top: 13px;
margin-bottom: 87px;
}
上述情況的組合會(huì)產(chǎn)生更復(fù)雜的外邊距折疊辛馆。
即使某一外邊距為 0，這些規(guī)則仍然適用豁延。因此就算父元素的外邊距是 0昙篙，第一個(gè)或最后一個(gè)子元素的外邊距仍然會(huì)“溢出”到父元素的外面。
如果參與折疊的外邊距中包含負(fù)值诱咏，折疊后的外邊距的值為最大的正邊距與最小的負(fù)邊距（即絕對值最大的負(fù)邊距）的和,苔可；也就是說如果有-13px 8px 100px 疊在一起，邊界范圍的技術(shù)就是 100px -13px 的 87px袋狞。
如果所有參與折疊的外邊距都為負(fù)焚辅，折疊后的外邊距的值為最小的負(fù)邊距的值。這一規(guī)則適用于相鄰元素和嵌套元素苟鸯。
