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％（親の高さに対して）がある場合、それは親の高さに影響します。子の高さは親の高さに依存し、親の高さは子の高さに依存するため、不正確な高さになるか、無限ループになります。確かに、これはオフセットの親===親の場合にのみ影響しますが、それでも影響します。解決が難しい奇妙なケースです。

更新：最後の数文は完全に正確ではない場合があります。リーフ要素（子を持たない子）の高さは、その上のすべての要素の高さに影響を与えるため、さまざまな状況に影響します。

「N％」マージン（パディング）があるために同じマージントップ/マージン/右マージン底/余白左のため、すべての4つは、同じベースに対してでなければなりません。上/下が左/右とは異なるベースを使用した場合、「n％」のマージン（およびパディング）は、4辺すべてで同じことを意味することにはなりません。

（また、幅に対して上下のマージンがあることに注意してくださいがあると、奇妙なCSSハックが有効になり、アスペクト比が変化しないボックスを指定できるようになります（ボックスが再スケーリングされた場合でも）。

このJSFiddle（Chrome 46.0.2490.86）で遊んで、この投稿（中国語で書かれている）を参照した後、@ ChuckKollarsからの回答に投票します。

無限計算の予想に対する主な理由は、次のとおりです。使用widthすると、同じ無限計算問題に直面します。

これを見ていJSFiddleを、parentディスプレイがありinline-block、それにマージン/パディングを定義する資格があります。childマージン値を持っています20%。無限の計算に従うと予想にと：

1. の幅はchild、parent
2. の幅はparent、child

しかしその結果、Chromeはどこかで計算を停止し、次のような結果になります。

JSFiddleで「結果」パネルを水平方向に展開しようとすると、幅が変化しないことがわかります。のコンテンツが2行に（たとえば、1行ではなく）child折り返されていることに注意してください。なぜですか？Chromeはどこかでハードコーディングしただけだと思います。コンテンツを編集してさらに大きくすると（JSFiddle）、水平方向に余分なスペースがある限り、Chromeはコンテンツを2行に保持します。child

だから我々は見ることができます：無限の計算を防ぐいくつかの方法があります。

私は、この設計は同じ指標に基づいて4つのマージン/パディング値を維持するだけであるという推測に同意します。

この投稿（中国語で書かれています）も別の理由を提案しています。それは、読み取り/タイプセットの向きが原因です。幅を固定し、高さを（事実上）無限にして、上から下に向かって読みます。

私はOPがCSS仕様で上下マージンのパーセンテージを幅の％として定義している理由を尋ねていることを理解していることを理解しています（ただし、想定されているように高さではありません）。

最近のほとんどのブラウザーは、vwとvhをサポートしているため、ビューポートの幅と高さに対してマージンの数値を指定できます。

スクロールバーがない場合、100vw / 100vhは（それぞれ）100％幅/ 100％高さに相当します。スクロールバーがある場合、ビューポート番号はこれを考慮しません（％番号はそうです）。ありがたいことに、ほぼすべてのブラウザーが17pxのスクロールバーサイズを使用しています（こちらを参照））、css calc関数を使用してこれを考慮することができます。スクロールバーが表示されるかどうかわからない場合、このソリューションは機能しません。

例：水平スクロールバーがないと仮定すると、高さの50％の上マージンは、「margin-top：50vh;」として定義できます。水平スクロールバーの場合、これは「margin-top：calc（0.5 *（100vh-17px））;」として定義できます。（calcのマイナスとプラスの演算子は、両側にスペースが必要です！）