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

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

CSS でマージントップパーセンテージを計算するには、その参照点を理解する必要があります。直感的な仮定とは異なり、親の高さではなく、親の幅から計算されます。

W3C 仕様の詳細

W3C 仕様には、「パーセンテージは計算されます」と明記されています。生成されたボックスの包含ブロックの幅に関して。」これは、margin-top と margin-bottom の両方に当てはまります。

一貫性の確保と循環依存の回避

すべての辺のパーセントベースのマージン (margin-top、-) right、-bottom、-left) レイアウトの一貫性を提供します。水平方向と垂直方向の両方のマージンにパーセンテージを使用すると、マージン サイズの不一致を回避できます。

さらに、コンテナの幅に基づいた垂直マージンにより、ページ レイアウトの循環依存が回避されます。ブロックの高さはそのコンテンツによって異なりますが、コンテンツの高さには上下の余白を含めた計算が必要です。垂直方向のマージンをコンテナの幅に固定することで、この依存関係が解消され、効果的なレイアウトが可能になります。

コード例

.container {<br> 背景: ライトブルー;<br> パディング: 10px;<br> 高さ: 100px;<br> 幅: 500px;<br>}</p>
<p>p {<br> 表示: ブロック;<br> ボーダー: 1 ピクセル赤一色; <br> margin-top: 50%;<br>}<br>

実行時、margin-top はコンテナの幅 500 ピクセルを基準にして測定され、マージンは 250 ピクセルになります。 .

以上がCSS ではマージントップの割合はどのように計算されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。