精通外距摺疊

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

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

相鄰的同層級元素

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

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

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

• 父元素的 margin-top 會與其第一個在流中的後代元素的 margin-top 摺疊，除非父元素有 border-top、padding-top、包含任何行內內容（例如文字），或已套用 clearance。
• 父元素的 margin-bottom 會與其最後一個在流中的後代元素的 margin-bottom 摺疊，除非父元素有已定義的 height 或 min-height、border-bottom 或 padding-bottom。在這兩種情況下，在父元素上建立一個新的區塊格式化上下文也會防止其外距與其子元素的外距摺疊。

空區塊

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

一些注意事項：

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