テキスト
line-height
line-height は 1 行の高さを指定します。単位なしの数値で書くと、文字の大きさの何倍かになります。
構文
normal | <number [0,∞]> | <length-percentage [0,∞]>プレビュー
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
line-height: 2;
}コントロール
line-height2
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
解説
値の書き方
- 数値：
1.8なら文字の大きさの 1.8 倍です。ふつうはこれを使います。 - 長さ・パーセント：
32pxや150%のように書きます。パーセントはその要素の文字の大きさに対する割合です。 normal：フォントに合わせてブラウザが決めます。多くのフォントで1.2前後です。初期値です。
単位なしの数値を使う理由
line-height は子の要素に引き継がれます。単位なしの数値は倍率のまま引き継がれるので、子の文字が大きくなれば行も高くなります。150% や 1.5em は、親の文字の大きさで計算した長さが引き継がれます。親が 16px なら子にはずっと 24px が渡り、子の見出しを 32px にすると行が重なります。
行の上下に半分ずつ足される
行の高さと文字の高さの差は、文字の上と下に半分ずつ足されます。そのため 1 行目の上にも空きができ、ボタンなどで文字が上下の真ん中に来ます。1 行だけの要素は height と同じ line-height を指定すると、文字が縦の真ん中に来ます。
気をつけること
- 日本語の本文は、英語より行間を広めにとることが多いです（
1.7〜2くらいが目安）。 fontショートハンドを書くと、省略したline-heightはnormalに戻ります。