css垂直外邊距疊加的原因

1、外邊距的疊加，其實(shí)是特指垂直外邊距的疊加，因?yàn)橐?guī)定水平外邊距是不會(huì)進(jìn)行疊加的。
2、外邊距的疊加原則，可以用通俗的四個(gè)字概括：“弱肉強(qiáng)食”，即都為正值是取較大值。
3、為什么要有外邊距的疊加呢？有一些標(biāo)簽，如<p></p>標(biāo)簽，是默認(rèn)有上下外邊距的。當(dāng)你上下排列數(shù)個(gè)<p>標(biāo)簽時(shí)，如果沒(méi)有外邊距的疊加原則，那么就會(huì)出現(xiàn)2倍邊距的尷尬情況。同理，如果你通過(guò)列表渲染輸出數(shù)個(gè)上下排列的子塊級(jí)元素，如果沒(méi)有外邊距的疊加原則，也是會(huì)出現(xiàn)此類(lèi)情況。

CSS里有很多屬性是有缺省值的，如果不了解它的缺省值，就無(wú)法理解為什么會(huì)是這樣一種展現(xiàn)形式。

對(duì)于外邊距塌陷(margin collapse)來(lái)說(shuō)，并不是說(shuō)必然如此的，實(shí)際它也是由于一個(gè)缺省值的設(shè)定而導(dǎo)致的。在Chrome瀏覽器里，這個(gè)缺省值就是由-webkit-margin-collapse規(guī)定的。-webkit-margin-collapse的缺省值就是collapse，所以導(dǎo)致塌陷。這個(gè)屬性還有另外2個(gè)取值：一個(gè)是discard，一個(gè)是separate。下面我們來(lái)具體看一下它們的不同表現(xiàn)形式。

-webkit-margin-collapse: collapse

我們先從簡(jiǎn)單的看起。假定我們有這樣一個(gè)<div>，這個(gè)<div>里面有3個(gè)<p>，如果我們什么也不設(shè)，它就是這個(gè)樣子：

你會(huì)看到每一個(gè)<p>下面都有一個(gè)下邊距。現(xiàn)在我們加上margin: 20px 0;表示為每一個(gè)<p>增加一個(gè)20px的上邊距和一個(gè)20px的下邊距，現(xiàn)在再看一下效果：

這時(shí)我們看到雖然第一個(gè)<p>有20px的上邊距，但第2個(gè)<p>的20px上邊距已經(jīng)被第一個(gè)<p>的下邊距『吃掉』了，這就是我們大家所熟知的外邊距塌陷。

-webkit-margin-collapse: separate

現(xiàn)在我們來(lái)看一下第2種情況，如果我們?cè)O(shè)定-webkit-margin-collapse: separate之后會(huì)怎么樣：

現(xiàn)在我們看到塌陷的外邊距回來(lái)了。

-webkit-margin-collapse: discard

那么第3種取值discard是什么作用呢？

外邊距完全沒(méi)有了。

延伸思考

幾乎沒(méi)有哪一個(gè)前端工程師不討厭外邊距塌陷，那么如果我們就是想強(qiáng)制所有元素邊距都不塌陷，同時(shí)還想實(shí)現(xiàn)類(lèi)似上面圖2的效果，那么該怎么辦呢？

我們不能再簡(jiǎn)單地同時(shí)設(shè)置上下邊距為margin: 20px 0;而應(yīng)該更精確控制，給<p>只設(shè)置下邊距為20px就可以了，這樣我們就實(shí)現(xiàn)了在強(qiáng)制不塌陷的情況下依然保持了行與行之間的距離。

題外話(huà)

『外邊距塌陷』其實(shí)是W3C早期標(biāo)準(zhǔn)為了一時(shí)方便而引入的一個(gè)過(guò)度設(shè)計(jì)，它的設(shè)計(jì)初衷是為了簡(jiǎn)化，但結(jié)果在CSS高度發(fā)展的情況下反倒造成了更大的混亂，使得前端工程師無(wú)法一目了然地知道自己的代碼結(jié)果，不明白自己明明已經(jīng)設(shè)置好的margin-top: 20px;怎么就會(huì)沒(méi)有了？結(jié)果被人告知還要學(xué)習(xí)外邊距塌陷這樣的知識(shí)。這樣的錯(cuò)誤責(zé)任不在于工程師沒(méi)有好好學(xué)習(xí)，而根本原因在于CSS本身設(shè)計(jì)的缺陷，才導(dǎo)致了工程師學(xué)習(xí)成本的增加，并且還增加了瀏覽器開(kāi)發(fā)者的工作量，需要特意為外邊距塌陷開(kāi)發(fā)額外的代碼。無(wú)論如何，這是一件各方成本都增加的雙輸設(shè)計(jì)。