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