文字の高さ指定
ブラウザによっては、
文字のサイズが同じでも、文字の高さが異なり、
行間が詰まって見えることがある。
これを解消するのが
「 line-height 」で、
上下にどれくらいの余裕を持たせるのかを指定できるプロパティ。
上下の余白も含めたサイズである。
◉ line-height の使い方
line-height { 数値 ; }
line-height の指定単位は、主に3つ。
● 数値のみ。フォントサイズ×数値が列の高さを指定する。
● em(フォントサイズの何倍か?)や、px、ptなどの単位を用いる。
● フォントサイズの何%かをパーセント指定する。
※何もマイナス値を指定することはできない。
サイズに対する割合で指定する方が一般的。
● 割合 = 文字の高さ/文字のサイズ
EX) font-size : 14px
line-height : 20px にしたいとする。
しかし、この場合、割合で指定するので、
{ line-height : 1.429 ; } ※( 20 / 14 = 1.429 )
となる。
◉ なぜpxではなく割合で指定するのか??
例えば、文中で強調したい部分がある場合、<strong> 〜 </strong>
タグで囲む。
この際、line-height をpxで指定していると、
強調部分のみ行間が詰まってしまう。
これを避けるために、
「 line-height 」の値を「font-size」の割合で指定しておくことで、
同様の行間を保つことができる。
割合で指定した例:
line-heightプロパティのサンプルです。行間の指定は文書の読みやすさに非常に重要です
pxで指定した例:
line-heightプロパティのサンプルです。行間の指定は文書の読みやすさに非常に重要です。