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

2007–03–14

• 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だけ

結果

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

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

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

結論

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

Posted in /web/html-css
ブックマークする: