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

CSS で行ボックスの高さを指定する line-height 値に、em(length) や %(percentage) などの単位を付けて指定しているサイトを意外と見かける。それは間違いではないし、例えばナビゲーションとかでブロック要素の垂直センターに配置するために意図的に指定しているんであれば良いんだけれど、そうでないなら line-height 値には単位なし (number) で指定した方が良いのにとか思ったりする。その理由は Eric's Archived Thoughts: Unitless line-heights でも分かりやすく説明されているんだけど、ちと劣化コピーしてみる。

単位ありと単位なしの違い

手っ取り早く説明するために、サンプルを作ってみた。p 要素があって、その中にインライン要素の em で一部分を強調している。分かりやすいようにそれぞれの font-size を px 指定してみた。

• line-heights-sample.html

サンプルの上段には line-height の値に単位をつけて指定。

p {
  font-size: 16px;
  line-height: 1em;
}
p em {
  font-size: 24px;
}

サンプルの下段には line-height の値に単位をつけずに指定。

p {
  font-size: 16px;
  line-height: 1;
}
p em {
  font-size: 24px;
}

サンプルを見てみると、p 要素自体の行ボックスの高さは同じなのに、その子要素である em 要素の行ボックスの高さに相違がみられる。つまり、子孫要素への継承のされ方が違っているって事になる。実際に line-height 値がそれぞれどうなってるのかを表すと下記のようになる。

line-height の値に単位をつけて 1em とした場合

p {
  font-size: 16px;
  line-height: 1em = 16px;
}
p em {
  font-size: 24px;
  line-height: 16px;
}

line-height の値に単位をつけずに 1 とした場合

p {
  font-size: 16px;
  line-height: 1 = 16px;
}
p em {
  font-size: 24px;
  line-height: 24px;
}

em や パーセントなどの単位ありで指定すると、まず line-height 値に font-size と掛け合わせた計算値が使用される。この場合、p 要素のフォントサイズは 16px なんで 行ボックスの高さも 16px になる。んで、この計算値が子孫要素にそのまま継承されてしまう。つまり、子孫要素である em 要素の行ボックスの高さも 16px となってしまう。

一方、単位なしで指定すると、line-height 値には同じく font-size と掛け合わせた計算値 16px が指定される。そして、子孫要素である em にはこの計算値ではなく指定値である 1 が継承され、em の font-size と掛け合わせた数値 24px が行ボックスの高さになる。

単位なしで指定しておいた方がお薦め

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