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

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

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

ブロック要素

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

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

2. ブロック フォーマット コンテキスト (BFC): BFC では、高さは次のシーケンスによって決定されます。 :

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

インライン要素

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

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

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

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