📄
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>
ではなく単位なしの数値を使うようにしましょう。
ちょっと株式会社(chot-inc.com)のエンジニアブログです。 フロントエンドエンジニア募集中! カジュアル面接申し込みはこちらから chot-inc.com/recruit/iuj62owig
Discussion