line-height

テキスト・フォント

行の高さ(行間)を指定するプロパティです。読みやすさに大きく影響します。

構文

Syntax
line-height: normal | <number> | <length> | <percentage>

コード例

1

line-height: 1.6;
実行結果

行の高さが1.6倍に設定されています。
読みやすい行間になっています。

フォントサイズの1.6倍の行高(推奨値)

2

line-height: 1;
実行結果

行の高さが1倍(タイトル用)
文字サイズと同じ高さです。

フォントサイズと同じ高さ(タイトル用)

3

line-height: 2rem;
実行結果

絶対値で2remの行高
固定の行間です。

絶対値で行高を指定

💡 TIPS

単位なしの数値指定が推奨。1.4-1.6が読みやすい。

関連プロパティ

ブラウザサポート

全ブラウザ対応