父元素包含子元素邊距不一致

當有邊距的元素放置在另一個元素內時，父元素可能不會始終包含該邊距。這種不一致的行為讓許多開發者感到困惑。

要理解這種現象，有必要深入研究邊距折疊的概念。 W3C 規格將折疊邊距定義為兩個或多個框的相鄰邊距（沒有中間內容、填充或邊框）的組合，以形成單一邊距。

在放置了邊距的元素的情況下在另一個元素中，子元素的上邊距和下邊距可以折疊到父元素的上邊距。這通常會導致父元素包含子元素的邊距。

但是，在某些條件下可以覆寫此預設行為。這些條件包括：

• 對父元素應用實線邊框
• 將子元素的位置設定為絕對
• 給予子元素內聯塊顯示
• 在父元素上啟用自動溢出

這些覆蓋背後的原因是它們都涉及創建邊界防止子元素的邊距折疊到父元素的邊距中。

需要注意的是，有關邊距折疊的 W3C 規範可能會令人困惑，有時似乎不合邏輯。他們將「自由邊距」（會觸及父級頂部​​或底部且不包含在其中的邊距）與「折疊邊距」（允許重疊的相鄰邊距）混合在一起。

標題為「折疊」的網站文章Margins」提供了對此行為的詳細解釋，包括說明原始問題中描述的確切場景的範例。了解這些行為對於在Web 開發中創建一致且可預測的佈局至關重要。