line-height における数値指定とパーセント指定の違い

はじめに

CSSのline-heightプロパティを使うと、行の高さを調整できますが、数値とパーセントの指定で挙動が異なることをご存知でしょうか？
私自身、 line-height をパーセント指定して思わぬレイアウト崩れが発生する問題に悩まされました。今回は、このような問題を防ぐために、数値指定とパーセント指定の違いについて紹介します。

例

• 最初の div 要素では、line-height: 180% が指定されています。この場合、 line-height はその要素自身のフォントサイズ（ 14px ）に対して 180% の割合が適用されます。結果として、 line-height は 14 * 1.8 = 25.2px になります。
• 2つ目の div 要素では、 line-height: 1.8 と数値で指定されています。この場合、 line-height は p タグのフォントサイズ（ 18px ）に対して適用されるため、 18 * 1.8 = 32.4px の行の高さが設定されます。

まとめ

MDNのドキュメントにも記載されている通り、 line-height のパーセント指定は

要素自身のフォントサイズに対する相対値です。計算値はこの <percentage> に要素のフォントサイズの計算値を掛けたものです。パーセント値は予期しない結果を生む可能性があります

line-height で比率を指定したい場合は、 <percentage> ではなく単位なしの数値を使うようにしましょう。