今天談?wù)凜SS外邊距疊加的問題，邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
　　在進(jìn)行CSS網(wǎng)頁布局時(shí)會(huì)遇到許多奇怪的問題，這些問題可能是瀏覽器的bug，也可能是我們對(duì)CSS屬性不夠了解，雖然Webjx.com介紹了大量的知識(shí)，但多動(dòng)手編碼，掌握到了技巧才是自己的。
　　今天談?wù)凜SS外邊距疊加的問題，邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。
　　合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
　　外邊距合并（疊加）是一個(gè)相當(dāng)簡單的概念。但是，在實(shí)踐中對(duì)網(wǎng)頁進(jìn)行布局是，它會(huì)造成許多混淆。
　　簡單地說，外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。
　　當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。請(qǐng)看下圖：

　　當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。請(qǐng)看下圖：

　　盡管看上去有些奇怪，但是外邊距甚至可以與自身發(fā)生合并。
　　假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：

　　如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：

　　這就是一系列的段落元素占用空間非常小的原因，因?yàn)樗鼈兊乃型膺吘喽己喜⒌揭黄?，形成了一個(gè)小的外邊距。
　　外邊距合并初看上去可能有點(diǎn)奇怪，但是實(shí)際上，它是有意義的。以由幾個(gè)段落組成的典型文本頁面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

　　注釋：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并。

最新評(píng)論