行の高さは HTML コンテンツ ボックスの高さにどのように影響しますか?

HTML 要素のコンテンツ ボックスの高さを理解する

HTML では、要素はブロック要素またはインライン要素として分類できます。コンテンツ ボックスの高さ、または画面上でコンテンツ ボックスが占める領域は、さまざまなルールによって決定されます。

ブロック要素

div やブロック要素などp の高さは主に line-height プロパティによって決まります。行の高さが 2em などの値に設定されている場合、コンテンツ ボックスの高さは行の高さの 2 倍になります。

この動作は、次の図に示すように、すべてのブロック要素にわたって一貫しています。次の例:

インライン要素

ブロック要素とは異なり、次のようなインライン要素スパンには高さのプロパティはありません。代わりに、垂直方向の寸法はフォントのプロパティから導出されます。仕様では、UA がインライン要素のコンテンツ ボックスの高さをどのように決定するかを明示的に定義していませんが、通常、フォントの em ボックスまたはアセンダー/ディセンダーの測定値が使用されます。

これは、ラインを設定できる一方で、インライン要素の高さは、その高さに直接影響しません。以下に示すように、高さは使用されるフォントとフォント サイズによって異なります。

以上が行の高さは HTML コンテンツ ボックスの高さにどのように影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。