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

インライン要素の行の高さの説明

インライン要素の高さの測定値はコンテキストに応じて異なります。詳細な内訳は次のとおりです。

インライン ボックスの高さ

インライン ボックスは、グリフのコンテンツと先頭の半分を含む長方形の領域です。行の高さは、このボックスの高さを決定します。これは、ほとんどの場合、行の高さの値と同じです。

行ボックスの高さ

行ボックス一連のインラインボックスを囲みます。すべてのインライン ボックスの行の高さと垂直方向の配置が同じである場合、行ボックスの高さは行の高さによって決まります。

インライン ボックスのコンテンツ領域の高さ

インライン ボックスのコンテンツ領域は、テキストやその他の要素が表示される領域です。この領域は、ユーザー エージェント (ブラウザ) の実装に応じて、インライン ボックスの高さと異なる場合があります。

ほとんどのブラウザは、フォント ファミリとフォント サイズの組み合わせで最も高いグリフに基づいてコンテンツ領域の高さを決定します。これにより、コンテンツ領域が行ボックスの高さよりも大きくなる可能性があります。

Font-Size と Content Area Height

while font-size (この例では 15px) em-box の高さを決定しますが、コンテンツ領域の高さが 15 ピクセルであることは保証されません。これは、ブラウザがフォントの特性に基づいて調整を行うためです。

たとえば、この場合、ブラウザはコンテンツ領域の高さを、「Verdana」フォントの場合は 18 ピクセル、「sans-serif」フォントの場合は 17 ピクセルとして計算しました。 font-size を 15px に設定したとしても。これらの値は、フォント サイズの 1.0 ～ 1.2 倍の「妥当な」範囲内にあります。

背景色と線の高さ

背景色の高さインライン要素はコンテンツ領域の高さまでしか拡張されないため、行の高さとは一致しません。これは、行の高さが 15 ピクセルであるにもかかわらず、例の緑色の背景の高さが 18 ピクセルしかない理由を説明しています。

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