为什么 CSS 边距百分比始终基于包含块的宽度？

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

在 CSS 中，盒模型定义如何相对于包含块的尺寸计算边距和填充。根据 CSS 规范，边距百分比始终根据包含块的宽度来计算。此行为延伸到顶部和底部边距。

此决定背后的理由尚不清楚，但猜测表明这是为了防止与父元素高度计算发生潜在冲突。如果填充百分比基于高度，它将影响父元素的高度，反之亦然。这可能会导致高度重新计算的无限循环或高度值不准确。

要理解此行为，请考虑一个实际示例：

<div>

正如预期的那样，内部 div 的上边距和左边距都是外部 div 宽度的 10%，即 20px。但是，如果边距百分比基于高度，则内部 div 的上边距将为 80px，这将与父级指定的 800px 高度冲突。

虽然根据宽度计算的边距百分比在某些情况下可能看起来违反直觉，但它保持 CSS 盒模型的一致性并防止潜在的高度计算问题。

以上是为什么 CSS 边距百分比始终基于包含块的宽度？的详细内容。更多信息请关注PHP中文网其他相关文章！