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

CSS でマージントップのパーセンテージはどのように計算されますか?

マージントップのパーセンテージを親コンテナ内の子要素に適用する場合、パーセンテージがどのように計算されるかを理解することが重要です。マージンのパーセンテージは、高さではなく、含まれているブロックの幅を基準とします。

W3C 仕様

W3C 仕様によれば、マージン上部のパーセンテージは次のように計算されます。含まれるブロックの高さではなく、幅を基準にします。これにより、水平マージンと垂直マージンの一貫性が保証され、要素の高さを計算する際の循環依存関係が回避されます。

幅ベースのマージン計算の理由

ベースにする主な理由は 2 つあります。含まれるブロックの幅の垂直マージン:

• 水平方向と垂直方向の一貫性: マージン上部とマージン下部のパーセンテージは、マージン左とマージンに関して一貫して動作する必要があります。 -right パーセンテージ。幅に基づきます。
• 循環依存性の回避: ブロックの高さは通常、その内容によって決まり、その内容は上下のマージンによって決まります。幅に基づいて垂直方向のマージンを設定すると、この循環依存関係が解消され、論理的なページ レイアウトが可能になります。

例

高さのある親コンテナのシナリオを考えてみましょう。 100 ピクセル、幅 500 ピクセル、および margin-top: 50% の子要素。マージン上部のパーセンテージはコンテナの幅を基準にして計算され、500 ピクセルの 50% になります。したがって、margin-top は幅の半分の 250px になります。

コード例

次の CSS は、margin-top を 50% に設定する効果を示しています。幅ベースのコンテナの場合:

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

p {
  display: block;
  border: 1px solid red;
  margin-top: 50%;
}</code>

この例では、子要素の margin-top は 250 ピクセルになります。これは、コンテナの幅 500 ピクセルの 50% として計算されます。

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