ブロック要素とインライン要素のコンテンツ ボックスの高さはどのように決定されますか?

ブロックおよびインライン要素のコンテンツ ボックスの高さを決定する

ブロック要素の高さを理解する

ブロック レベルの要素では、 content-box は、コンテンツの先頭から次のいずれかまでの距離によって定義されます (インライン書式設定コンテキスト (IFC) またはブロック書式設定コンテキスト (BFC) の有無に応じて):

1. IFC の最後の行ボックスの下部
2. BFC の最後のインフローの子の下マージン

要素に明示的に高さが設定されている場合、要素の高さコンテンツ ボックスは単にその値です。

インライン要素の高さ

インライン要素の場合、コンテンツ ボックスの高さは明示的に定義されておらず、フォント サイズやその他のフォント プロパティによって異なります。インライン要素の垂直マージン、境界線、パディングはコンテンツ ボックスの上部と下部から始まりますが、行ボックスの高さには影響しません。

例: 高さの決定

提供された HTML スニペットでは、コンテンツ ボックスの高さは次のとおりです:

• 段落 (

  ):

  高さは行の高さと同じです。 (2em) は、1 行の IFC を確立するためです。
• Div (
  ): 同じ理由で、行の高さ (2em) とも等しくなります。
• スパン (): 高さは行の高さによって変化します。これは、高さが行の高さではなくフォントのプロパティによって定義されることを示します。