【CSS】行間を調整するなら line-heightプロパティを使う

「ここの文章、行間が狭くて読みにくいな。」

と思う時がある。

そういう時に使えるのが、行の高さを調整するline-heghtプロパティだ。

これは文字の大きさを決めるfont-sizeプロパティと合わせて設定すると行間をうまくコントロールできる。

例えば、下記のように文字のサイズが14pxの場合。

この場合に行間を上下それぞれ5pxずつ空けたいとする。

その場合はline-heightプロパティを下記のように指定すればOKだ。

文章の行間は

行の高さー文字サイズ＝行間

という式になる。

行間は上下にバランスよく間が空くから、さっきの例で言うと

24px（行の高さ）－14px（文字サイズ）＝10px（行間）

行間が合計で10pxなので

上下にバランスよく割り振ると、文字の上側5px、文字の下側5px　となるのだ。

line-heightには直接30pxと数値を入れてもいいし、

font-sizeの何倍か？を表すために line-height:2；と記述してもOK。（この場合、文字サイズの2倍という意味になる）

もしくは、％で表示して、文字サイズの～％って設定することもできる。

line-height:150%; →文字サイズの150％の大きさに行の高さを設定する。

line-heightは使う機会が多いので、このあたりでしっかり頭を整理しておきたい。