line-heightの指定方法はたくさんあるのだけれどどの方法が良いのか

はじめに

line-heightを指定して、行間を狭めるABテストの案件がありました。 細かな指定を実現するために、調査したところ色々と指定方法があったのでメモ

対象

• 基本的なcssの知識がある
• line-heightで細かい指定をするために、仕組み・仕様をきちんと理解したい

基本情報

line-heightは主に、文字の行間を指定するcssの属性です。 正確には、フォントサイズと上下の余白の合計値の指定となります。

解説

• 単位があるもの
• パーセント（文字基準サイズに対する指定）
• em（文字基準サイズを1emとして計算）
• px（px指定）
• 単位がないもの

単位があるもの

line-height 値に font-size と掛け合わせた計算値が行間になります。 例えば...

• ①font-size 15px line-heght 100% ならば、行間は15px
• ②font-size 15px line-heght 1em ならば、行間は15px

子要素には、計算値がそのまま継承されます。しまう。つまり、子孫要素である em 要素の行ボックスの高さも 15px となります。

単位がないもの

単位なしで指定した場合、line-height 値 * font-size の計算値が行間になります。 なお結果がpxになり、こちらは小数点以下は反映されません。

例えば、①と②は計算結果は違うのですが、ブラウザでの見た目は変わりません。

• ①既存行間：font-size 14.5px line-height 1.5 = 21.75px
• ②ちょっと狭い行間：font-size 14.5px line-height 1.45 = 21.025px
• ③狭い行間：font-size 14.5px line-height 1.45 = 20.3px

なお単位指定なしの場合、子孫要素の「em」 には計算値ではなく指定値が継承されます。①の場合は、21pxが継承されず、line-heightの1.5 が継承されます。ハマりやすいので注意。

まとめ

計算結果がpxになる場合は小数点以下は反映されないので注意です。

また、親要素に単位なしの値で line-height を指定することで、子孫要素でいくら font-size を変えようが、それに合わせて行間を計算してくれるため、出来るだけ単位なしでline-heightを指定しておくのが良いです。 （単位ありで指定してしまうと、その要素の子孫要素で行ボックスの高さが意図していないものになってしまう可能性がある）