「CSSでline-heightを指定したのに、行間が変わらない…」「意図した余白にならない」
といった問題に直面したことはありますか？
実は、line-heightが効かない（あるいは効いていないように見える）のには、明確な原因があります。
この記事では、line-heightが反映されない主な原因とその対処法、
さらに保守性を高めるためのベストプラクティスを分かりやすく解説します。
line-heightが効かない主な原因と対処法
原因①：インライン要素（spanなど）に指定している
spanやaタグなどのインライン要素は、基本的に高さ（height）の概念を持たないため、line-heightが期待通りに反映されないことがあります。
厳密には「行の高さ」は持ちますが、背景色を塗った際の領域や、上下の余白として認識しづらい性質があります。
【対処法】
spanタグなどインライン要素にline-heightを指定する際は、display: block; または display: inline-block; を指定して、
ブロックレベルの性質を持たせましょう。
原因②：親要素の指定や継承の影響
line-heightは親要素から子要素へ継承されるプロパティです。
子要素で個別に指定したつもりでも、親要素やさらに上位のタグ（bodyなど）で強力な指定がされていたり、CSSの優先順位（詳細度）で負けていたりすると反映されません。
【対処法】
ブラウザのデベロッパーツール（検証モード）で、line-heightを指定したい要素の親要素を確認し、
どの要素に指定したline-heightが優先されているか確認し、調整を行いましょう。
原因③：inputやbuttonなどのフォーム要素
inputやbuttonタグなどの一部のフォーム要素は、ブラウザ独自のデフォルトスタイルが強く、line-heightだけで高さを調整できないことがあります。
【対処法】heightと合わせてpaddingで上下の余白を調整するか、appearance: none; でスタイルをリセットするのが有効です。
【重要】line-heightは「単位なし」の相対値で指定すべき
line-heightを指定する際、pxなどの絶対値を使っていませんか？
結論から言うと、line-heightは「単位なしの数値」で指定するのがベストです。
なぜ「単位なし」が良いのか？
単位なしで指定すると、その要素のfont-sizeに対する倍率として計算されます。
- 絶対値（px）の場合：
font-sizeを変更するたびに、line-heightも計算し直して書き換える必要があります。 - 相対値（単位なし）の場合：
font-sizeが大きくなれば、行間も自動で適切な比率に保たれます。
例えば line-height: 1.5; としておけば、
フォントサイズが16pxなら行高は24px、20pxなら30pxと自動計算されます。
これにより、メンテナンス性が劇的に向上します。
まとめ：チェックリスト
line-heightが効かないときは、以下の3点をまず確認しましょう。
- 要素の表示形式： インライン要素になっていないか？（
inline-blockあるいはblock要素にする） - 指定の書き方： 単位なしの相対値（1.5〜1.7程度）で指定しているか？
- 優先順位： 他のCSSに上書きされていないか？
適切な行間設定は、サイトの読みやすさ（アクセシビリティ）に直結します。
ぜひこの機会にマスターしておきましょう！
