掌握外邊距摺疊

塊級元素的上外邊距和下外邊距有時會合並（摺疊）成一個單獨的外邊距，其大小是各個外邊距中的最大值（或者如果它們相等，則取其中一個），這種行為稱為外邊距摺疊。請注意，浮動元素和絕對定位元素的外邊距永遠不會摺疊。

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

相鄰兄弟元素

相鄰兄弟元素的外邊距會摺疊（除非後一個兄弟元素需要清除浮動）。

父元素與後代元素之間沒有內容分隔

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

• 父元素的margin-top與其第一個正常流後代元素的margin-top會摺疊，除非父元素有border-top、padding-top、包含任何行內內容（例如文字），或者應用了清除浮動。
• 父元素的margin-bottom與其最後一個正常流後代元素的margin-bottom會摺疊，除非父元素定義了height或min-height，有border-bottom，或者有padding-bottom。

在這兩種情況下，在父元素上建立一個新的塊格式化上下文也將阻止其外邊距與其子元素摺疊。

空塊級元素

如果一個塊級元素的margin-top和margin-bottom之間沒有邊框、內邊距、行內內容、height或min-height來分隔，那麼它的頂部和底部外邊距會摺疊。

一些注意事項

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