當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

5、CSS 外边距合并

發布時間：2025/3/20 CSS 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 5、CSS 外边距合并小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。

1、外邊距合并

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

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

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

<html> <head><style type="text/css"> * {margin:0;padding:0;border:0; }#d1 {width:100px;height:100px;margin-top:20px;margin-bottom:20px;background-color:red; }#d2 {width:100px;height:100px;margin-top:10px;background-color:blue; }</style> </head><body><div id="d1"> </div><div id="d2"> </div><p>請注意，兩個 div 之間的外邊距是 20px，而不是 30px（20px + 10px）。</p> </body> </html>

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

<html> <head> ? <style type="text/css"> * {margin:0;padding:0;border:0; } ? #outer {width:300px;height:300px;background-color:red;margin-top:20px; } ? #inner {width:50px;height:50px;background-color:blue;margin-top:10px; } ? </style> </head> ? <body> ? <div id="outer"><div id="inner"></div> </div> ? <p>注釋：請注意，如果不設置 div 的內邊距和邊框，那么內部 div 的上外邊距將與外部 div 的上外邊距合并（疊加）。</p> </body> </html>

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

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

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

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

外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并，后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。

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

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的5、CSS 外边距合并的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
外边