line-heightプロパティ
CSS(スタイルシート)のline-heightプロパティは、行の高さの最小値を調整することのできるプロパティです。
文字が主体となったウェブサイトでは、行の高さが低いと読みにくいため、ある程度の高さに設定をすることで離脱率を低くすることが期待できます。
行の高さは「font-size」より上と下に作る余白となります。
「line-height」を0に設定をすると、「font-size」と「line-height」の範囲が同じになり、余白がなくなります。

line-heightの書き方
line-height: 値;
line-heightプロパティの値
指定方法 | 内容 |
---|---|
normal | 初期値。既定値は1.2。 |
実数(単位なし) | 指定したフォントサイズ×数値 この書き方が推奨されています |
実数(単位あり) | px、em、%などで指定します |
line-heightの記述例
<p class="height2">1段落目の文章</p>
<p class="height2">2段落目の文章</p>
<p class="height3">3段落目の文章</p>
<p class="height3">4段落目の文章</p>
/* 基準の文字サイズの2倍を指定 */
.height2 {
line-height: 2.0;
}
/* 基準の文字サイズの3倍を指定 */
.height3 {
line-height: 3em;
}
