line-height の単位

line-height に単位はいらない？どっちでも良いんじゃない？

そう思っていた時期もありました。
しかし今日、実際にそれが覆されました。

line-heightの値を1.8emにしたら、上の図みたいになったのですが
emを消して1.8と数字のみにしたら

これまで、単位なし＝emだと思い込んでいたのですが、どうやら違うようです。
詳細は8年くらい前に指摘されていたブログがありました。浦島太郎と名乗ることすら浦島太郎に失礼だと思えてきました。

line-height の値には単位なしが良いとされる理由（lucky bag様）

私の頭でも理解できるように、ものすごく簡潔にまとめると
親要素に line-height をemや%の単位付きで指定した場合、子要素にも同じ値が継承される
ということらしいです。

[code]
<div class="box">
親要素に行間の指定をかけた場合、子要素に継承されるらしいけど、line-height（というか全てのCSS）の中にinheritっていう親要素を継承させるように指定する値があったはずなんだけど、その設定はどうなったんだろう。
<p class="top">文字が小さいとこうなります。1.5という控えめな設定にしたから、emが付くと良い具合に空きそうな気もするけど、これで2emとかやっちゃったらきっと大変。pxは使わない方が良いってのはどこのブログも共通らしいけど、1行を縦中央にセンタリングしたい時に普通に使ってる。考え直すべきなのかな。</p>
<p class="bottom">文字が大きいとこうなります。行間詰まってると確かに読みにくい。元々line-heightは1.7くらいが好みだったんだけど、最近1.8好みになった。我ながら人に影響されやすい。</p>
</div>
[/code]

こんなHTMLタグがあったとします。
下のように、emを付けると

[code]
div.box { font-size: 16px; line-height: 1.5em; }
div.box p.top { font-size: 12px; }
div.box p.bottom { font-size: 20px; }
[/code]

em を付けると、子要素の font-size が 12px でも 20px でも、行間は24pxのままなので
24−12＝12 12÷2＝6 なので、12pxだと上下6pxずつ空きます。
24−20＝4 4÷2＝2 なので、20pxだと上下2pxずつしか空きません。

emを外してみます。

[code]
div.box { font-size: 16px; line-height: 1.5; }
div.box p.top { font-size: 12px; }
div.box p.bottom { font-size: 20px; }
[/code]

数値のみだと、子要素の font-size に応じて 1.5 で計算されます。
12pxだと、12×1.5＝18 18−12＝6 6÷2＝3 なので、12pxだと上下3pxずつ空きます。
20pxだと、24×1.5＝36 36−24＝14 14÷2＝7 なので、20pxだと上下7pxずつ空きます。

文字の大きさに行間が左右されるより、ある一定の行間を保った方が無難、という考え方のようです。

ただ、このような意見もあるのが面白いですね。

line-height に単位ありの指定は駄目？（WWW WATCH様）

ある要素内で一部だけ他より大きな文字サイズを指定されたテキストが存在する場合でも、レイアウト的にそのテキストに引っ張られて行間が開いてしまうのは困るという場合もあります。その場合は意図的に単位付きの値を指定することでそれを回避するといったことも考えられます。

ごもっともです。
強調文字を多用するページの場合、むしろそんな仕様がなければ困ります。

何にしても、無駄でしかない設定はきっと1つもないので、用途に応じて使い分けていきたいものです。

私の場合、用途に応じるだけの知識をまず身に付けるべきですね。

【ハートブレーン】https://blog.heart-kokoro.net