CSS辞書

line-height

テキスト・フォント

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

構文

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

Tailwindでは

leading-noneline-height: 1
leading-tightline-height: 1.25
leading-relaxedline-height: 1.625
leading-6line-height: 24px

一般形: leading-{n}(n×4px)

任意値: leading-[1.8]

インタラクティブデモ

Try it

コントロール

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が読みやすい。

🤖 AIがよく間違えるポイント

line-heightは単位なし(例: 1.7)で書くのが原則です。em や % で書くと「計算後の値」が子に継承され、フォントサイズの違う子要素で行間が破綻します。AIは1.5emのような単位付きを出すことがあるので注意。日本語本文は英語より広めの1.7〜1.9が読みやすい目安です。

💬 AIへの頼み方

このline-heightの単位付き指定を単位なしに直して、継承の破綻がないか確認して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

このプロパティを使ったUIレシピ

ブラウザサポート

Baseline 広く利用可能
Chrome
1+
Firefox
1+
Safari
1+
Edge
12+