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

Question

如果您查看 CSS box model spec ，您会观察到以下情况:

The [margin] percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1. (emphasis mine)

确实如此。但是为什么？究竟是什么迫使任何人以这种方式设计它？很容易想到你想要的场景，例如某些东西总是比页面顶部低 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

将我的评论转移到答案中，因为它合乎逻辑。但是，请注意，这是毫无根据的猜测。从技术上讲，以这种方式编写规范的实际原因仍然未知。

Element height is defined by the height of the children. If an element has padding-top: 10% (relative to parent height), that is going to affect the height of the parent. Since the height of the child is dependent on the height of the parent, and the height of the parent is dependent on the height of the child, we'll either have inaccurate height, or an infinite loop. Sure, this only affects the case where offset parent === parent, but still. It's an odd case that is difficult to resolve.

更新:最后几句话可能不完全准确。叶元素(没有子元素的子元素)的高度会影响其上方所有元素的高度，因此这会影响许多不同的情况。