為什麼父元素並不總是包含一致的子元素邊距？

父元素的邊距包含不一致

當有邊距的元素放置在另一個元素中時，父元素並不總是一致地換行或包含該邊距。這種不一致似乎違反直覺，尤其是與邊框、位置、顯示和溢出等其他屬性的行為相比。

重疊邊距與摺疊

直覺上，人們可能會假設 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中文網其他相關文章！