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

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

インライン要素の行の高さの仕組みの決定は複雑な場合があります。ニュアンスを明確にするための詳細な説明は次のとおりです。

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

インライン要素は、line-height で定義されたインライン ボックスを作成します:

The height of the inline box encloses all glyphs and their
half-leading on each side and is thus exactly 'line-height'.

つまり、インライン要素の line-height を 15px に設定すると、そのボックスの高さは次のようになります。 15px.

ライン ボックスの高さ

ただし、インライン ボックスを囲むライン ボックスにも定義された高さがあります。

The height of a line box is determined by the rules given in the
section on line height calculations.

インライン ボックスの場合行の高さが同じで垂直方向に配置されている場合、行ボックスの高さは行の高さと同じになります。したがって、この場合、ライン ボックスの高さも 15 ピクセルになります。

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

ブラウザの開発者ツールでは、高さが表示されることがよくあります。インラインボックス内のコンテンツ領域の。この高さは通常、フォントの最大アセンダとディセンダによって決まります。

The height of the content area should be based on the font, but this
specification does not specify how.

その結果、フォント サイズが設定されている場合でも、コンテンツ領域の高さは変化する可能性があり、行の高さよりも大きくなる場合があります。

要約すると、インライン要素に関連付けられたさまざまな高さです。 include:

• インライン ボックスの高さは行の高さによって決まります。
• 同じ行の高さと垂直方向の配置を持つインライン ボックスの場合、行ボックスの高さも行の高さによって決まります。 .
• コンテンツ領域の高さは、フォントの最大アセンダとディセンダによって決まります。

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