行間・行の高さの設定 | CSS

行間、行の高さを設定するには、CSSの line-heightプロパティを使用します。値には数値を設定しますが、単位なしが一般的です。

line-height は、テキストの上下に余白を設定するプロパティであり、(値 - フォントサイズ) / 2 が片方の余白の大きさとなります。単位なし数値を設定した場合、フォントサイズとの比率となります。

1
2
3

<p class="l10">行の高さ１<br>行の高さ１</p>
<p class="l15">行の高さ１.５<br>行の高さ１.５</p>
<p class="l20">行の高さ２<br>行の高さ２</p>

1
2
3
4
5
6
7
8
9

.l10 {
    line-height: 1;
}
.l15 {
    line-height: 1.5;
}
.l20 {
    line-height: 2;
}

上の例のように、値として１を設定すると、行の高さはフォントサイズと同じになるので、行の間隔はゼロとなります。

１.５の場合は、フォントサイズが１６pxの場合、(16 × 1.5 - 16) /2 = 4 となるので、テキストの上下に 4px ずつ、余白が設定されます。

２を設定すると、行と行の間に、１行分の余白が設定されます。

１.５を設定した場合の余白のイメージは、以下のようになります。青色の部分が余白であり、line-height は、青色と灰色の高さを合わせたものとなっています。