为什么CSS中的边距/填充百分比总是按宽度计算？

Question

如果您查看CSS盒模型规范，将会观察到以下内容：

[margin]百分比是相对于所生成的盒子的包含块的 宽度 来计算的。 请注意，“ margin-top”和“ margin-
bottom”也是如此。
如果包含块的宽度取决于此元素，则结果布局在CSS 2.1中未定义。 （强调我的）

确实是这样。但是 为什么
呢？到底什么会迫使任何人以这种方式设计它？很容易想到您想要的场景，例如，某件事总是比页面顶部低25％，但是很难提出您希望垂直填充相对于水平尺寸相对的任何原因。父母。

这是我所指现象的一个示例：

<div style="border: 1px solid red; margin: 0; padding: 0; width: 200px; height: 800px;">
  This div is 200x800.
  <div style="border: 1px solid blue; margin: 10% 0 0 10%;">
    This div has top-margin of 10% and left-margin of 10% with respect to its parent.
  </div>
</div>

Answer 1

将我的评论转为答案，因为这是合乎逻辑的。但是，请注意，这是没有根据的推测。为何以这种方式编写规范的实际原因在技术上仍然未知。

元素高度由子代的高度定义。如果一个元素的padding-
top为：10％（相对于父级高度），则将影响父级的高度。由于孩子的身高取决于父母的身高，而父母的身高则取决于孩子的身高，所以我们的身高可能会不正确，或者会无限循环。当然，这仅会影响offset
parent === parent，但仍然如此。这是一个很难解决的奇怪情况。

更新：最后两句话可能并不完全准确。叶元素（没有子元素的子元素）的高度会影响其上方所有元素的高度，因此会影响许多不同的情况。