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

Question

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

如果你看看CSS盒模型规范，您将观察到以下情况：

[保证金]百分比是根据宽度生成的框的包含块。请注意，这是正确的‘边缘-顶部’和‘保证金-底部’以及。如果包含块的宽度取决于此元素，则在CSS2.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>

http://jsfiddle.net/8JDYD/

Answer 1

把我的评论转到一个答案上，因为这是合乎逻辑的。不过，请注意，这是毫无根据的猜测。关于为什么用这种方式编写规范的实际推理，在技术上仍然是未知的。元素高度由子元素的高度定义。如果一个元素有填充顶：10%(相对于父元素的高度)，这将影响父元素的高度。由于子节点的高度取决于父级的高度，而父级的高度取决于子级的高度，所以我们要么有不准确的高度，要么有一个无限循环。当然，这只会影响偏移父=父级的情况，但仍然是这样。这是一个很难解决的奇怪案件。更新：最后几句可能不完全准确。叶元素(没有子元素的子元素)的高度对其上方所有元素的高度都有影响，因此这会影响许多不同的情况。