精通外距摺疊

區塊的上外距和下外距有時會合併（摺疊）成一個單一外距，其大小為個別外距中最大的那個（如果相等，則為其中一個的大小），這種行為稱為外距摺疊。請注意，浮動和絕對定位元素的外距永不摺疊。

外距摺疊發生在三種基本情況下：

相鄰的同層級元素

相鄰同層級元素的外距會摺疊（除非後面的同層級元素需要清除浮動）。

沒有內容分隔父元素和後代元素

父區塊與其後代元素之間的垂直外距可以摺疊。當它們之間沒有任何內容分隔時，就會發生這種情況。具體來說，這發生在兩種主要情況下：

空區塊

如果沒有邊框、內距、行內內容、height 或 min-height 來分隔一個區塊的 margin-top 和其 margin-bottom，那麼它的上外距和下外距就會摺疊。

一些注意事項：

  • 當上述情況結合時，會發生更複雜的外距摺疊（超過兩個外距）。
  • 這些規則也適用於零外距，所以無論父元素的外距是否為零，後代元素的外距最終都會根據上述規則跑到父元素外面。
  • 當涉及負外距時，摺疊後的外距大小是最大的正外距和最小的（最負的）負外距的總和。
  • 當所有外距都是負值時，摺疊後的外距大小是最小的（最負的）那個外距。這適用於相鄰元素和巢狀元素。
  • 外距摺疊只與垂直方向有關。
  • 在 display 設定為 flex 或 grid 的容器中，外距不會摺疊。

範例

HTML

html
<p>此段落的下外距被摺疊…</p>
<p>…與此段落的上外距一起，產生了 <code>1.2rem</code> 的間距。</p>

<div>
  這個父元素包含兩個段落！
  <p>此段落與上方文字之間有 <code>.4rem</code> 的外距。</p>
  <p>我的下外距與父元素摺疊，產生了 <code>2rem</code> 的下外距。</p>
</div>

<p>我在上方元素的下方 <code>2rem</code> 處。</p>

CSS

css
div {
  margin: 2rem 0;
  background: lavender;
}

p {
  margin: 0.4rem 0 1.2rem 0;
  background: yellow;
}

結果

參見