CSS のマージンとパディングのパーセンテージが高さではなく幅に相対しているのはなぜですか?

CSS のマージン/パディングのパーセンテージが幅に関連付けられる理由

CSS ボックス モデルは、マージンとパディングのパーセンテージが幅に対して計算されることを定義します含まれているブロックの。この奇妙な動作により、その理論的根拠について疑問が生じています。

CSS ボックス モデル仕様からの強調抜粋

「[マージン] パーセンテージは、幅に対して計算されます。」生成されたボックスの包含ブロックは、「margin-top」と「margin-bottom」に当てはまります。 「

推論に関する推測

制限要因としての親の身長への影響

根拠のない推測は次のことを示唆していますこの決定は、高さの計算に関する懸念から生じた可能性があります。要素の高さは通常、その子の高さによって定義されます。 padding-top が親の高さに対する相対パーセンテージとして適用される場合、親の高さに影響します。ただし、子の高さは親の高さに依存し、またその逆も同様であるため、依存関係ループまたは不正確な高さの計算が作成されます。

ネストされたシナリオの考慮事項

これこの懸念は、親の身長が子供の身長に依存し、子供の身長が親の身長に依存する場合に特に関係します。 (例: 親のオフセット === 親)。このようなケースの解決は、依存関係ループまたは無限計算のため困難になります。

例

次のコード スニペットを考えてみましょう。

<div>

この中でたとえば、内部 div の上マージンは親 div の幅 (200px) の 10% として計算され、結果は20 ピクセルの余白。

以上がCSS のマージンとパディングのパーセンテージが高さではなく幅に相対しているのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。