ホームページ  >  記事  >  ウェブフロントエンド  >  行の高さはブロック要素とインライン要素の高さにどのように影響しますか?

行の高さはブロック要素とインライン要素の高さにどのように影響しますか?

DDD
DDDオリジナル
2024-11-11 22:29:02379ブラウズ

How Does Line-Height Affect the Height of Block and Inline Elements?

ブロック要素とインライン要素の高さの決定について

ブロックまたはインライン要素の高さを決定する場合、行の高さプロパティは、特に特定のブロック要素にとって重要な役割を果たします。 contexts.

ブロック要素

ブロック要素の場合、コンテンツ ボックスの高さは 2 つの主なシナリオに依存します:

  1. インラインフォーマットコンテキスト (IFC): 要素が IFC を確立する場合、高さは次のようになります。段落と div の例に見られるように、要素の行の高さによって定義されます。これらの要素には、高さが line-height によって決定される 1 つの行ボックスが含まれています。
  2. ブロック フォーマット コンテキスト (BFC): BFC では、高さは次のシーケンスによって決定されます。 :

    • 要素内の最後の行ボックスの下端 (IFC が
    • 最後のインフロー子要素のマージンの下端 (その下マージンが要素の下マージンと重なっていない場合)。
    • 最後のインフロー子要素の下端の境界線インフロー子要素 (上マージンが要素の下マージンと重なっていない場合)。
    • 上記の条件のいずれでもない場合はゼロapply.

インライン要素

ブロック要素とは異なり、インライン要素には定義された高さプロパティがありません。 コンテンツ領域の高さは、使用されるフォントのプロパティによって決定され、コンテンツ領域の高さには直接関係しません。 line-height.

仕様では、「UA は、たとえば、em ボックスまたはフォントの最大アセンダーとディセンダーを使用して」高さを決定し、ユーザー エージェントの裁量に任せると述べられています。

注: インライン要素のコンテンツ領域は、その行ボックスとは異なります。コンテンツ領域を囲む垂直方向のパディング、境界線、マージンが追加されますが、行ボックスの高さを計算する際には行の高さのみが考慮されます。

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。