CSS 外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。

合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

外邊距合併（疊加）是乙個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。

簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：

當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：

儘管看上去有些奇怪，但是外邊距甚至可以與自身發生合併。

假設有乙個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：

如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併：

這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合併到一起，形成了乙個小的外邊距。

外邊距合併初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文字頁面為例。

第乙個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。

這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一起，這樣各處的距離就一致了。

注釋：只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。 

CSS 外邊距合併

做了個div 巢狀div的實驗，父div和子div都有margin邊距 發現margin top 10px 根本不起作用，後來發現是外邊框合併問題，他會合併取兩者大的邊距，如果子div的邊距是30px 那麼父子div還是會貼著 只是，父div外邊距會變成30的效果 外邊距合併指的是，當兩個垂直外邊距...

CSS外邊距合併

外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。外邊距合併 疊加 是乙個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外...

CSS 外邊距合併

源 評 外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。外邊距合併 外邊距合併 疊加 是乙個相當簡單的概念。但是，在實踐中對網頁進行布局時，它會造成許多混淆。簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙...