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

<p>

ブロック要素とインライン要素のコンテンツ ボックスの高さの決定

ブロック要素

<p>ブロック要素の場合、コンテンツ ボックスの高さは次のとおりです。次の方法で line-height プロパティを使用して決定できます:

• ブロックレベルの子、パディング、またはボーダーがない場合、要素の高さは line-height によって決定されます。
• ブロック要素がインライン フォーマット コンテキスト (IFC) を確立する場合、高さは line-height によって設定された最後の行ボックスによって定義されます。
• ブロック要素がブロック フォーマット コンテキストを確立する場合(BFC) の場合、高さは、最後のインフローの子の高さ (折りたたまれたマージンを含む)、またはその子の下の境界線のエッジ (その上のマージンが要素の下のマージンで折りたたまれていない場合) によって決まります。

インライン要素

<p>インライン要素の場合、高さプロパティは適用されません。代わりに、コンテンツ領域の高さは使用されるフォント メトリックに基づき、CSS プロパティによって明示的に制御することはできません。コンテンツ領域は常に行ボックス内に収まる必要がありますが、正確な高さはフォントとレンダリング エンジンによって異なる場合があります。

<p>違いを説明するために、次のコード スニペットを考えてみましょう:

<p>

<p>この例では、div 要素と p 要素が IFC を確立しているため、行ボックスの高さは行の高さと一致します。ただし、インラインのスパン要素の場合、コンテンツ領域の高さはフォント メトリックによって決定され、行の高さとは異なる場合があります。

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