CSSで文章の行の高さを調整するときは、line-heightプロパティで設定します。
書き方としては、以下のように書きます。
セレクタ名 {
line-height: 値;
}
normal | Webブラウザが判断して行の高さを決定する |
---|---|
数値のみで指定 | 文字サイズと指定した数値をかけた値が行の高さになる |
単位で指定 | 数値にpxやemなどの単位で指定する |
%で指定 | パーセントで指定する |
例えば、line-heightを2と指定したときの行の高さは、200%や2emと指定したときと同じになります。
p {
font-size: 30px;
line-height: 2;
}
line-heightは文字サイズが基準となるので、上の(例)のフォントサイズが30pxだったときのline-heightは60pxとなるわけですね。
行間は、line-heightの60pxからフォントサイズの30pxを引いた30pxが行間のサイズとなり、上下の行間のサイズはそれぞれ15pxとなります。