行の高さ(行間)を指定するプロパティです。数値(推奨)、px、%、emで指定でき、読みやすさに大きく影響します。一般的に1.5〜1.8が読みやすいとされ、単位なしの数値指定が推奨されます。
line-height: normal | <number> | <length> | <percentage>| leading-none | line-height: 1 |
| leading-tight | line-height: 1.25 |
| leading-relaxed | line-height: 1.625 |
| leading-6 | line-height: 24px |
一般形: leading-{n}(n×4px)
任意値: leading-[1.8]
これは複数行のテキストです。 行の高さを変更すると、 行間が変化します。
.element {
line-height: 1.5;
}line-height: 1.6;行の高さが1.6倍に設定されています。
読みやすい行間になっています。
フォントサイズの1.6倍の行高(推奨値)
line-height: 1;行の高さが1倍(タイトル用)
文字サイズと同じ高さです。
フォントサイズと同じ高さ(タイトル用)
line-height: 2rem;絶対値で2remの行高
固定の行間です。
絶対値で行高を指定
単位なしの数値指定が推奨。1.4-1.6が読みやすい。
line-heightは単位なし(例: 1.7)で書くのが原則です。em や % で書くと「計算後の値」が子に継承され、フォントサイズの違う子要素で行間が破綻します。AIは1.5emのような単位付きを出すことがあるので注意。日本語本文は英語より広めの1.7〜1.9が読みやすい目安です。
このline-heightの単位付き指定を単位なしに直して、継承の破綻がないか確認して
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。