ホームページ > 記事 > ウェブフロントエンド > CSS ではマージントップが幅に基づいて計算されるのはなぜですか?
CSS でのマージントップのパーセンテージの計算
マージントップのパーセンテージは、それを含むブロックの幅を基準にして計算されます。これは、コンテナの高さと幅に基づいてそれぞれ計算される垂直マージンと水平マージンとは異なります。
例:
次の CSS コードを考えてみましょう。
<code class="css">.container { background: lightblue; padding: 10px; height: 200px; width: 500px; } p { display: block; border:1px solid red; margin-top:50%; }</code>
この例では、子段落要素の margin-top は 50% です。パーセンテージはコンテナの幅 (500 ピクセル) に基づいて計算されます。したがって、段落はコンテナの上部から 250 ピクセル (500 ピクセルの 50%) の位置に配置されます。
幅ベースの計算の理由:
主な理由は 2 つあります。含まれるブロックの幅に基づいて垂直方向のマージンを設定する場合:
動的高さの例:
幅ベースの垂直マージンの効果を実証するには、次のコードを検討してください:
<code class="html"><div class="container"> <p id="element"> Some Cool content</p> </div> <p> MORE TEXT </p></code>
<code class="css">.container { background: lightblue; padding: 10px; height: 100px; width: 500px; } p { display: block; border: 1px solid red; margin-top: 50%; }</code>
この場合、段落要素はその内容に基づいて動的な高さを持ちます。 50% のマージントップは、段落の高さではなくコンテナの幅に基づいて計算されます。これにより、段落の内容に関係なく、段落が正しい位置に留まることが保証されます。
以上がCSS ではマージントップが幅に基づいて計算されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。