「ここの文章、行間が狭くて読みにくいな。」
と思う時がある。
そういう時に使えるのが、行の高さを調整するline-heghtプロパティだ。
これは文字の大きさを決めるfont-sizeプロパティと合わせて設定すると行間をうまくコントロールできる。
例えば、下記のように文字のサイズが14pxの場合。
|
1 2 3 |
p { font-size:14px } |
この場合に行間を上下それぞれ5pxずつ空けたいとする。
その場合はline-heightプロパティを下記のように指定すればOKだ。
|
1 2 3 4 |
p { font-size:14px; line-height:24px; } |
文章の行間は
行の高さー文字サイズ＝行間
という式になる。
行間は上下にバランスよく間が空くから、さっきの例で言うと
24px（行の高さ）－14px（文字サイズ）＝10px（行間）
行間が合計で10pxなので
上下にバランスよく割り振ると、文字の上側5px、文字の下側5px となるのだ。
line-heightには直接30pxと数値を入れてもいいし、
font-sizeの何倍か？を表すために line-height:2；と記述してもOK。（この場合、文字サイズの2倍という意味になる）
もしくは、％で表示して、文字サイズの～％って設定することもできる。
line-height:150%; →文字サイズの150％の大きさに行の高さを設定する。
line-heightは使う機会が多いので、このあたりでしっかり頭を整理しておきたい。