CSSのfontで使われる単位なしのline-heightについて

以前使用していたWordPressのテーマで使われていたCSSファイルに

font: 0.8em/1.8

と書かれていた.CSSで使われるfontはこのサイトにあるように,フォント関連のスタイル(イタリック体、スモールキャピタル、太さ、サイズ、行の高さ、フォント)を一括で指定するプロパティのようだ.つまり,上に書いたプロパティは0.8emのfont-size(サイズ)でline-height(行の高さ)は1.8にするということを表している.しかし,なぜline-heightに単位をつけていないのか.

その理由に関しては次にサイトで紹介されていた.

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

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

コメント

タイトルとURLをコピーしました