CSS マージンのパーセンテージが常に含まれるブロックの幅に基づくのはなぜですか?

CSS のマージン/パディングのパーセンテージを理解する

CSS では、ボックス モデルは、マージンとパディングが包含ブロックの寸法に対してどのように計算されるかを定義します。 。 CSS 仕様によれば、マージンのパーセンテージは常に、それを含むブロックの幅に対して計算されます。この動作は、上マージンと下マージンの両方に適用されます。

この決定の背後にある理論的根拠は不明ですが、親要素の高さの計算との潜在的な競合を防ぐために行われたのではないかと推測されています。パディングのパーセンテージが高さに基づいている場合は、親要素の高さに影響し、その逆も同様です。これにより、高さの再計算の無限ループや不正確な高さの値が発生する可能性があります。

この動作を理解するには、実際の例を考えてみましょう。

<div>

予想通り、内側の div の上端と左端のマージンはどちらも外側の div の幅の 10% (20px) です。ただし、マージンのパーセンテージが高さに基づいている場合、内側の div の上マージンは 80 ピクセルになり、親の指定された高さ 800 ピクセルと競合します。

幅に対してマージンのパーセンテージを計算することは、シナリオによっては直観に反しているように見えるかもしれませんが、 CSS ボックス モデルの一貫性を維持し、潜在的な高さ計算の問題を防ぎます。

以上がCSS マージンのパーセンテージが常に含まれるブロックの幅に基づくのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。