CSSの行高さの計算

line-height は行の高さを表します。これは、テキストの 2 行のベースライン間の距離です。

ライン ボックス ボックス -> インライン ボックス (インライン要素) -> 匿名のインライン ボックス (コンテンツ領域/テキスト/インライン ボックス)。連続した 1 つの行ボックスと複数の行を合計すると複数の行ボックスになります。

行間とは、テキストの 1 行目の下行からテキストの 2 行目の上行までの 2 行間の距離です。

半行間隔は行間隔の半分です。

行の高さ = コンテンツ領域 + 行間隔 (一部のフォントでは、コンテンツ領域の高さはフォント サイズと等しくなります。SimSun Song 王朝など)

1. ブロックレベルの要素とフォントの高さサイズは関係なく、行の高さが拡張されます

2. インライン要素の高さは、設定された行の高さによって拡張されます。要素の高さには影響しません

3行と2行のテキストの場合、行の高さを設定します。値が小さいほど、行間隔は小さくなります。コンテンツ領域は変更されず、最小行高さは 0 になります。逆に。

4 番目に、ブロックレベルのコンテナーでは、インライン要素を垂直方向に中央揃えにする原則 (中央に見えるだけで、実際には中央に配置されない) は次のとおりです。行の高さは高く、コンテンツ領域の高さは変化しません (通常、フォント サイズとフォント ファミリによって決まります)。 半行間隔は上下に増加または減少します (負の半行間隔)。コンテンツ領域は、IEブラウザのオフセット値を持っているため、Pの1px境界が計算されていないため、この値は41です。高さの計算については、PHP 中国語 Web サイトに注意してください。