インライン要素の高さがフォント サイズや背景色と異なるのはなぜですか?

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

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

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

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

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

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

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

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

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

以上がインライン要素の高さがフォント サイズや背景色と異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。