CSS でコンテナの幅に基づいてマージントップのパーセンテージが計算されるのはなぜですか?

CSS でのマージントップのパーセンテージの計算

マージントップのパーセンテージを要素に適用する場合、計算がどのように行われるかを理解することが重要です。実行されました。一般的な考えに反して、マージントップのパーセンテージは、ブロックを含むブロックの高さではなく、幅に基づいて決定されます。

W3C 仕様の説明:

によるとW3C 仕様では、「パーセンテージは、生成されたボックスの包含ブロックの幅を基準にして計算されます。」このルールは、「margin-top」と「margin-bottom」の両方に適用されます。

コンテナの幅に基づいて垂直方向のマージンを設定する理由:

1. 水平方向と垂直方向の一貫性: 'margin' 短縮表現プロパティで定義されているように、ブロックの 4 辺すべてのマージンのパーセンテージは等しいままである必要があります。コンテナの幅に基づいて垂直方向のマージンを設定すると、一貫したマージン サイズが維持されます。
2. 循環依存性の回避: ブロックの高さの計算は、多くの場合、上部と下部のマージンを理解することに依存します。ただし、これらのマージンがブロックの高さに依存する場合、レイアウト計算中に循環依存が発生します。コンテナの幅に基づいて垂直方向のマージンを設定すると、この問題は解決されます。

例:

次のコードを考えてみましょう:

<code class="css">.container {
  width: 500px;
  height: 100px;
}

p {
  margin-top: 50%;
}</code>

マージン「p」要素の 50% の -top は、「.container」の幅 (500px) に基づいて計算されます。したがって、適用される実際のマージントップは 250 ピクセル (500 ピクセルの 50%) になります。これは、100 ピクセル (200 ピクセルの 50%、'.container' の高さ) であるという一般的な想定とは異なります。

結論:

マージンがどのように設定されるかを理解することで、 -上位パーセンテージが計算されるため、要素の位置を効果的に制御し、予期しないレイアウトの問題を回避できます。垂直方向のマージンは、一貫したサイズを維持し、CSS レイアウトの循環依存関係を防ぐために、含まれるブロックの幅に基づいていることに注意してください。

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