normalブラウザーに任せる
初期値です。実際の高さはフォントによって異なり、多くのデスクトップブラウザーではおよそ1.2です。
line-height
文章の1行ぶんの高さを決めるプロパティ。複数行の間隔を広げたり縮めたりして、読みやすさの変化を確かめられます。
遊んでみよう
同じ文章で行間を比較
見てわかるCSSは、
動かして変化を比べ、
使い方まで学べます。
CSS
.element line-height: 1.5;
値のパターン
line-heightの構成要素
<number>単位なしの倍率
1.5なら、その要素自身のfont-sizeの1.5倍です。子要素へ継承しても、それぞれの文字サイズから計算されます。
<length> | <percentage>長さ・割合で指定
24pxや150%でも指定できますが、計算済みの高さが継承され、子要素で意図しない行間になることがあります。
早見表
初期値はnormalで、子要素へ継承されます。まずは単位なしの1.5前後から読みやすさを比べます。
01
normalフォントに合わせる初期値・およそ1.202
1文字サイズと同じ詰まりやすい03
1.5本文の読みやすさを確保目安04
2文字サイズの2倍ゆったり05
24px固定した長さ継承に注意06
150%文字サイズに対する割合継承に注意よくある使い方
01
本文を読みやすくする
段落は行どうしが重ならない余裕を持たせると、長い文章でも次の行を追いやすくなります。
p { line-height: 1.6; }02
見出しをひとまとまりに見せる
大きな見出しは本文より少し詰めると、複数行になってもひとつの見出しとしてまとまります。
h1 { line-height: 1.15; }03
1行のラベルを中央に整える
ボタンやバッジでも行の高さは使えますが、高さ合わせだけに頼らずpaddingと組み合わせます。
.label { line-height: 1; padding: 0.5em 0.75em; }ポイント
本文は1.5以上を目安に、単位なしで指定。
行の高さが低すぎると、文字が重なったり次の行を見失いやすくなったりします。主要な段落では1.5以上を目安にし、文字サイズの拡大にも追従する単位なしの値を使うと安全です。line-heightはすべての要素と::first-letter・::first-lineに適用でき、子要素へ継承されます。縦書きでは行ボックスの幅を調整します。
関連するCSSも見てみよう。
line-height と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。