為什麼 CSS 邊距百分比總是基於包含區塊的寬度？

理解CSS 中的邊距/填充百分比

在CSS 中，盒模型定義如何相對於包含塊的尺寸計算邊距和填充。根據 CSS 規範，邊距百分比總是根據包含區塊的寬度來計算。此行為延伸到頂部和底部邊距。

此決定背後的理由尚不清楚，但猜測表明這是為了防止與父元素高度計算發生潛在衝突。如果填充百分比是基於高度，它將影響父元素的高度，反之亦然。這可能會導致高度重新計算的無限循環或高度值不準確。

要理解此行為，請考慮一個實際範例：

<div>

正如預期的那樣，內部div 的上邊距和左邊距都是外部div 寬度的10%，即20px 。但是，如果邊距百分比是基於高度，則內部 div 的上邊距將為 80px，這將與父級指定的 800px 高度衝突。

雖然根據寬度計算的邊距百分比在某些情況下可能看起來違反直覺，但它保持 CSS 盒模型的一致性並防止潛在的高度計算問題。

以上是為什麼 CSS 邊距百分比總是基於包含區塊的寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！