line-height

テキスト・フォント

行の高さ(行間)を指定するプロパティです。数値(推奨)、px、%、emで指定でき、読みやすさに大きく影響します。一般的に1.5〜1.8が読みやすいとされ、単位なしの数値指定が推奨されます。

構文

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

インタラクティブデモ

コントロール

1.5
13

プレビュー

これは複数行のテキストです。 行の高さを変更すると、 行間が変化します。

生成されたCSS

.element { line-height: 1.5; }

コード例

1

line-height: 1.6;
実行結果

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

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

2

line-height: 1;
実行結果

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

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

3

line-height: 2rem;
実行結果

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

絶対値で行高を指定

💡 TIPS

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

関連プロパティ

ブラウザサポート

全ブラウザ対応