line-heightの継承をまとめてみた

/web/html-css

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

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

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

結果

単位ありの場合 要素内に特別大きい文字があっても、要素の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値を統一したい場合は、とりあえず全称セレクタを利用するのが良さそうです。

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。