Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。

• Lucky bag::blog, line-height の値には単位なしが良いとされる理由
• TRANS, YUI Fonts CSSのline-height: 1.22em;の謎を解く！

「line-height」の表示結果に関して、単位があるかないか（「line-height: 1.2;」なのか「line-hieght: 1.2em;」とするか）、そして全称セレクタから指定するかどうかで、得られる結果が微妙に違うと言う話について。

とりあえず検証してみました。以下のテスト・ファイルをどぞ。

• bodyにline-heightなし
• bodyにline-height（単位なし）
• bodyにline-height（単位あり）

• bodyに全称セレクタ＋line-height（単位なし）
• bodyに全称セレクタ＋line-height（単位あり）
• bodyに全称セレクタ＋line-height（単位あり）＋line-heightはbodyだけ

• 全称セレクタ＋line-height（単位なし）
• 全称セレクタ＋line-height（単位あり）
• 全称セレクタ＋line-height（単位あり）＋line-heightはbodyだけ

結果

単位ありの場合	要素内に特別大きい文字があっても、要素のline-heightで固定。
単位なしの場合	要素内に特別大きい文字があると、その文字のline-heightで調整。
全称セレクタにline-hieght	単位ありでも単位なしでも同じ。

どうも指定の方法によるスタイルの浸透度に違いがあるらしい。
「単位あり → 単位なし → 全称セレクタ」といった感じだろうか。全称セレクタからの指定が一番深く、隅々まで適用される感じ。

ま～全称セレクタが強いのは、（セレクタ自体の優先度というより）内に含む各要素に対して個別に適用されている点が強く出てるのではないか、という感覚です。実際、サンプルの場合だと<div>への指定では全称セレクタの指定は上書きされないけれど、<p>だとできます。

入れ子要素に対するline-height値の計算に関しては、「1.22em * 1.22 * 1.22em」みたいな掛け合わせではなく、単位ありでも単位なしでも「line-height: 1.22;」なら常に「1.22」のようです。場合によって表示が違うのは、単純に継承の違いですね。たぶん。

結論

単位が「あり」か「なし」かによる表示の違いは、単純に継承の違いでしょう。とりあえず全要素に指定する「* { line-height: ;}」だと単位があろうがなかろうが同じ結果になってます。なのでline-height値を統一したい場合は、とりあえず全称セレクタを利用するのが良さそうです。