行の高さとインライン要素: 詳細

インライン要素の行の高さの動作を理解するのは、わかりにくい場合があります。徹底的な研究にもかかわらず、いくつかの重要な側面は不明のままです。このガイドでは、次の質問に答えるために主題を深く掘り下げます。

1.フォント サイズと測定された高さの間の不一致:

フォント サイズ 15 ピクセルのインライン要素は、ブラウザー開発者ツールでは高さ 18 ピクセルで表示されます。これは次の理由で発生します。

• インライン ボックスの高さ: line-height プロパティは、すべてのグリフとその両側の半分の先頭を囲むインライン ボックスの高さを決定します。この場合、ボックスの高さは 15px です。
• コンテンツ領域の高さ: 開発者ツールはコンテンツ領域の高さを報告しますが、通常はグリフ サイズの変動により行の高さを超えます。フォント内。

2.背景色が行の高さと一致しません:

インライン要素の背景色が行の高さと一致しません。理由:

• 行ボックスの高さ: インラインボックス以外にもラインボックスがあります。行ボックスの高さは行の高さによって決まり、同じ行の高さと垂直方向の配置を共有するインライン ボックスのみが含まれます。この例では、行ボックスの高さも 15 ピクセルです。
• コンテンツ領域の高さ: 背景色がコンテンツ領域に適用されます。これは、使用されている中で最も高いグリフの高さに対応します。フォントとサイズ。この値はフォントの特性に応じて変化する可能性があり、行の高さとは直接関係しません。

注: CSS 仕様では、コンテンツ領域を計算するアルゴリズムが明示的に定義されていません。高さはユーザーエージェントの解釈に任せます。