なぜ「line-height」はいつも僕らを裏切るのか？——インラインボックスの正体を暴く
フロントエンドの現場で、「デザインカンプ通りに要素を配置したはずなのに、なぜか上下に微妙な余白ができる」「ボタン内のテキストを垂直中央揃えにするのに四苦八苦する」。そんな経験、一度はありますよね。
CSSのレイアウトにおいて、`line-height`は最も「わかったつもり」になりやすく、同時に最もエンジニアを悩ませる深淵です。今日は、仕様書を眺めるだけでは見えてこない、ブラウザが裏側でやっている「インラインボックスの計算ロジック」という泥臭い話を紐解いていきましょう。
—
1. 「Content Area」と「Leading」の正体
まず、ここから認識を改めましょう。「`line-height`は、文字そのものの高さではない」ということです。
ブラウザがインライン要素を描画する際、内部では以下の2つの要素がせめぎ合っています。
1. Content Area（文字の高さ）: フォントファイルが定義する「emボックス」や、各ブラウザが解釈する文字の高さ。
2. Leading（行間）: `line-height`の値から「Content Area」を引いた差分。
ブラウザはこの「Leading」を半分に割り、文字の上下に均等に配置します。つまり、`line-height: 1.5`と指定した場合、文字の上下にそれぞれ `(1.5 – 1.0) / 2 = 0.25` ずつ、見えない「余白」が自動的に付与されているのです。
これが、`span`や`a`タグに背景色をつけた瞬間に、上下に予期せぬ隙間が生まれる根本的な原因です。
—
2. インラインボックスの計算ロジック
エンジニアとして覚えておくべきは、「`line-height`は高さ（height）を直接指定するものではなく、行の『占有高さ』を決定する係数である」という点です。
インライン要素（`span`, `a`, `strong`など）の高さは、以下の式で計算されます。
- インライン要素の高さ = font-size + (line-height – font-size)
もし、親要素の`line-height`が`1.5`で、子要素の`font-size`が`16px`なら、`16px 1.5 = 24px`の高さを持つボックスとして扱われます。この「24px」という空間の中で、文字は垂直中央に配置されるよう強制されるのです。
—
3. 実践：現場で使える「詰まり」を解消するテクニック
では、この仕様とどう向き合うか。現場でよく使う、モダンなCSSのTipsを紹介します。
ケースA：ボタン内のテキストを完璧に中央揃えにする
Flexboxを使うのが一番手っ取り早いですが、もし「インライン要素のまま」制御したい場合は、`line-height`と`height`を一致させ、`vertical-align`で微調整するのが定石です。
.button-text {
/ 行の高さと要素の高さを揃えることで、視覚的な垂直中央を作る /
line-height: 40px;
height: 40px;
display: inline-block;
/ デフォルトのインラインボックスの余白を打ち消すためのTips /
vertical-align: middle;
}
ケースB：CSSで「行間」をデザインする（最新のベストプラクティス）
最近のトレンドは、`line-height`を単位なし（unitless）で指定し、フォントサイズに対して相対的に制御することです。これにより、親要素のフォントサイズが変わっても、美しい行間が自動的に追従します。
/ サイト全体のタイポグラフィ管理 /
body {
/ 単位なしの指定は、子要素に継承された際も計算し直されるため推奨 /
line-height: 1.6;
font-size: 16px;
}
/ 特定の装飾が必要な場合 /
.hero-title {
/ 見出しは少し詰めたほうが今っぽい /
line-height: 1.2;
}
.caption {
/ 補足情報はあえて行間を広げて可読性を上げる /
line-height: 1.8;
}
—
4. なぜこれが重要なのか？
「なんとなく`line-height`を触っている」状態から、「計算式を意識して`line-height`を制御できる」状態になると、レイアウトの崩れを事前に予測できるようになります。
特に、Webフォントを読み込んでいる場合、フォントによって「文字の詰め方（メトリクス）」が異なります。`line-height`の正体を理解していれば、「なぜかフォントを変えたらボタンが数ピクセルずれた」というような、現場で最も時間を浪費する「微調整」の沼から脱出できるはずです。
最後に、シニアエンジニアからのアドバイス
コードを書くとき、常に「ブラウザはこの要素をどんな箱として扱っているか？」を想像してください。CSSは「見た目の装飾」ではなく、「ボックスの積み木」です。その積み木一つひとつのサイズを論理的に理解できたとき、あなたのフロントエンドスキルは次のステージへ昇華します。
明日からの実装、少しだけ「ボックスの高さ」を意識してみてください。きっと景色が変わって見えるはずですよ。
コメント