[解決済み] なぜCSSのマージンやパディングのパーセンテージは常に幅に対して計算されるのですか？

疑問点

もし、あなたが CSSボックスモデル仕様 を見ると、以下のように観察できます。

マージン] のパーセンテージは 幅 を基準として計算される。 これは '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>

http://jsfiddle.net/8JDYD/

どのように解決するのですか？

論理的に筋が通っているので、私のコメントを回答に転記します。しかし、これは根拠のない憶測であることに注意してください。なぜ仕様がこのように書かれているのか、実際の理由は、技術的にはまだ不明です。

要素の高さは、子要素の高さによって定義されます。 の子要素の高さによって定義されます。要素に padding-top: 10% (親の高さに対する相対値) がある場合、それは親の高さに影響します。 の高さ) を持つ場合、それは親の高さに影響を与えることになります。そのため 子の高さは親の高さに依存し、親の高さは親の高さに依存します。 子の高さは親の高さに依存し、親の高さは子の高さに依存するので 高さが不正確になるか、無限ループに陥るかのどちらかです。もちろん、これは オフセットされた親==親の場合にのみ影響します。これは 解決するのが困難な奇妙なケースです。

更新: 最後の数文は完全に正確ではないかもしれません。リーフ要素 (子を持たない子) の高さは、その上のすべての要素の高さに影響するため、これはさまざまな状況に影響します。