私の「マージントップ」パーセンテージがコンテナからオーバーフローするのはなぜですか?

マージントップのパーセンテージの計算: 幅ベースのアプローチを理解する

CSS では、マージントップを含む垂直マージンは次の基準に基づいて計算されます。含まれているブロックの幅。このアプローチにより、マージン測定の水平方向と垂直方向の一貫性が保証され、コンテンツをレイアウトする際の循環依存関係が回避されます。

水平方向と垂直方向の一貫性:

短縮表記のマージン プロパティを使用すると、次のことを設定できます。四辺すべてに余白を設けます。垂直方向のマージンが幅ではなく高さに基づいている場合、異なる側のマージンのサイズが異なることが多くなり、一貫した動作が崩れます。

循環依存関係の回避:

CSS レイコンテンツを垂直ブロックで出力します。ブロックの幅は通常、その親の幅によって決まります。ただし、ブロックの高さはその内容に依存し、動的に変化する可能性があります。垂直方向のマージンが高さに依存する場合、親の高さと子のマージンの間に循環依存関係が存在します。

例:

次のコードを考えてみましょう。 has a margin-top: 50%:

<div class="container">
  <p>Some Cool Content</p> 
 
</div>

.container {  
  background: lightblue; 
  padding: 10px; 
  height: 200px;
}

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

子要素はコンテナーの上部 (100px) の 50% 下にあるという予想に反して、コンテナーの高さをオーバーフローします。これは、マージンの割合がコンテナの高さではなく幅に基づいているためです。この例では、コンテナの幅は 500 ピクセルで、マージントップは 250 ピクセルになります。

結論として、垂直マージンの計算は、一貫性を確保し、循環依存を回避し、効率的なレイアウトを可能にするために、含まれるブロックの幅に基づいています。建設中。

以上が私の「マージントップ」パーセンテージがコンテナからオーバーフローするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。