父元素的邊距包含不一致
當有邊距的元素放置在另一個元素中時，父元素並不總是一致地換行或包含該邊距。這種不一致似乎違反直覺，尤其是與邊框、位置、顯示和溢出等其他屬性的行為相比。
重疊邊距與摺疊
直覺上，人們可能會假設 CSS 規範中所描述的邊距摺疊會影響此行為。然而，儘管跨瀏覽器不存在重疊邊距和一致的行為，但這種不一致的根源在於其他地方。
邊距包含背後的邏輯
CSS 規範實際上定義了這種行為雖然帶有一些矛盾。規範討論了「自由邊距」（超出父元素的邊距）和「折疊邊距」（重疊的相鄰邊距），但沒有明確區分每種邊距的適用條件。
示範和結論
以下示範說明了這種不一致的行為：
<code class="html"><div class="block"> <h2 style="margin: 80px;">Is the margin contained (block)?</h2> </div> <div class="inline-block"> <h2 style="margin: 80px;">Is the margin contained (inline-block)?</h2> </div> <div class="position-absolute"> <h2 style="margin: 80px;">Is the margin contained (position-absolute)?</h2> </div> <div class="overflow-auto"> <h2 style="margin: 80px;">Is the margin contained (overflow-auto)?</h2> </div> <div class="border"> <h2 style="margin: 80px;">Is the margin contained (border)?</h2> </div></code>
將「區塊」元素（及其預設邊距行為）與所有其他元素進行比較時，不一致是顯而易見的元素。看起來，除了常規 div 的預設行為之外，所有內容都假定邊距由父級包含。
這種複雜的行為源自於 CSS 規格中關於邊距摺疊和可用邊距的模糊性。不幸的是，文件沒有提供關於這些概念如何與不同元素屬性（如邊框、位置和溢出）互動的清晰解釋。
以上是為什麼父元素並不總是包含一致的子元素邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
