CSS如何實現外邊距的合併

這篇文章主要介紹了CSS如何實現外邊距的合併,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

外邊距合併的情況

情況1

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

情況2

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

情況3

外邊界也可以與自身發生合併。 
假設有一個空元素，它有外邊距，但是沒有邊框或填滿。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併。
 
如果這個外邊距遇到另一個元素的外邊距，它也會發生合併： 

消除外邊距合併

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

 
從上圖可以明顯看出父元素和子元素的上外邊距發生了合併，兩者的上邊框發生了重疊。我們都知道合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。但這裡還要注意的是：合併後的外邊距是加在了父元素上，這一點從父元素和子元素上邊框重合就可以看出來。

消除外邊距合併之後的情況： 

#相關建議：

CSS外邊距合併的問題及解決措施

CSS基礎學習十五:盒子模型補充之外邊距合併

css的外邊距合併(如何實作不合併)

以上是CSS如何實現外邊距的合併的詳細內容。更多資訊請關注PHP中文網其他相關文章！