为什么 CSS 边距和填充百分比相对于宽度而不是高度？

为什么 CSS 中的边距/填充百分比与宽度相关

CSS 盒子模型定义边距和填充百分比是根据宽度计算的包含块的。这种奇怪的行为引发了对其基本原理的质疑。

CSS 盒子模型规范的强调摘录

“[margin] 百分比是根据宽度计算的请注意，对于“margin-top”和“margin-bottom”来说，这是正确的。好吧。”

推理猜想

对父母身高的影响作为限制因素

一个毫无根据的猜想表明该决定可能源于对高度计算的担忧。元素高度通常由其子元素的高度定义。如果 padding-top 以相对于父级高度的百分比应用，它将影响父级的高度。但是，由于孩子的身高取决于父母的身高，反之亦然，这会导致依赖循环或高度计算不准确。

嵌套场景注意事项

此当父母的身高取决于孩子的身高并且孩子的身高取决于父母的身高时，这一问题尤其重要（例如，偏移父级 === 父级）。由于依赖循环或无限计算，解决此类情况变得具有挑战性。

示例

考虑以下代码片段：

在此例如，内部 div 的上边距计算为父 div 宽度 (200px) 的 10%，结果是20 像素边距。

以上是为什么 CSS 边距和填充百分比相对于宽度而不是高度？的详细内容。更多信息请关注PHP中文网其他相关文章！