なぜ「行間」のズレでレイアウトは崩れるのか？`line-height`とインラインボックスの深淵
フロントエンドの現場で「なぜか要素の上下に微妙な隙間ができる」「アイコンとテキストの高さが数ピクセル合わない」といった、いわゆる“謎の余白”に頭を抱えた経験はありませんか？
CSSを数年書いていても、`line-height`の正体を正確に言語化できるエンジニアは意外と少ないものです。これは単なる「行の高さ」ではありません。ブラウザが裏側でどうやってピクセルを計算しているのか、その“物理”を知ることで、あなたのCSSは劇的に洗練されます。
今日は、中級エンジニアが避けては通れない、インラインボックスの高さ計算のメカニズムを深掘りしていきましょう。
—
1. `line-height` は「余白」ではない。それは「仮想領域」だ
まず、一番の誤解を解いておきます。`line-height` は「行と行の間の余白」ではありません。CSSの仕様上、`line-height` とは「インラインボックスの高さ（コンテンツ領域＋上下の半行分）」を定義するものです。
ブラウザはテキストをレンダリングする際、以下の3つのレイヤーを重ね合わせています。
1. フォントの高さ（content-area）: `font-size` によって決定される、文字そのものの領域。
2. 行の高さ（line-height）: デザイナーが指定する行間。
3. 行ボックス（line-box）: 1行に含まれるすべてのインライン要素を包括する親ボックス。
ここで重要なのは、「`line-height` – `font-size` の差分が、上下に均等に分配される（Leading/レディング）」という事実です。
たとえば `font-size: 16px` で `line-height: 24px` とした場合、差分の `8px` が上下に `4px` ずつ割り振られます。これが「謎の余白」の正体です。この「上下4px」という invisible な領域が、ボタンの垂直方向のセンタリングを狂わせる主犯格となります。
—
2. 現場のベストプラクティス：単位なし指定の理由
ベテランが口を揃えて `line-height` には「単位なし（数値のみ）」を指定しろと言うのには、明確な理由があります。
- `line-height: 1.5;`（単位なし）: 子要素に継承された際、子要素の `font-size` を基準に再計算される（推奨）。
- `line-height: 1.5em;`（em指定）: 親要素の計算済み値を継承する。予期せぬ倍率がかかり、レイアウトが崩れやすい。
チーム開発において、「なぜこの数字なのか？」を議論するコストを減らすためにも、原則として単位なしの数値指定を徹底しましょう。
—
3. 実践：インライン要素の制御サンプル
以下は、テキストとアイコンを並べた際によくある「ズレ」を解消し、堅牢に制御するためのサンプルコードです。そのままコピーして、実際のコンポーネント設計の参考にしてください。
/ リセットCSS的なアプローチ：インライン要素の制御 /
.text-container {
/ 単位なしを指定し、子要素のfont-sizeに対して相対的に効かせる /
line-height: 1.5;
font-size: 16px;
}
.text-container strong {
/
strongなどのインライン要素でfont-sizeを変えても、
line-heightは親から継承されるため、行ボックスの高さが
ガタつかず、安定したレイアウトが保たれます。
/
font-weight: 700;
}
.icon-wrapper {
/
アイコンとテキストを合わせる際は、
Flexboxで中央揃えをするのが現代の最適解。
line-heightの影響を排除し、物理的に中央に配置する。
/
display: inline-flex;
align-items: center;
gap: 4px;
vertical-align: middle; / インライン要素として扱う場合の微調整用 /
}
—
4. なぜ「インライン要素」の理解が重要なのか
`a`, `span`, `strong`, `time` といったインライン要素を扱うとき、私たちは常に「行ボックス」という invisible な支配下で仕事をしています。
もしあなたが「ボタンの中にアイコンを配置して、テキストと厳密に中央を揃えたい」と願うなら、CSSの `line-height` だけに頼るのではなく、`display: inline-flex` を活用してください。`line-height` によるレディング（行間計算）は、テキストが複数行になったときには強力ですが、単一行のボタンなどでは計算上のノイズになりがちです。
- 複数行の文章: `line-height` で呼吸を整える（読みやすさ重視）。
- UIコンポーネント（ボタン等）: `line-height` を `1` にリセットし、`padding` や `flex` で制御する。
この使い分けができるようになれば、あなたのCSSは「なんとなく動いている」状態から「論理的に破綻しない」状態へと昇華されます。
—
最後に
ブラウザのレンダリングエンジンは、私たちが思う以上に厳格なルールで動いています。「なぜかズレる」と思ったときこそが、CSSの仕様を深く学ぶチャンスです。`line-height` の背後にある「目に見えない領域」を意識するだけで、あなたの実装スピードとクオリティは一段階上のステージへと向かうはずです。
明日からの実装で、ぜひ「行ボックス」を意識してみてください。きっと、今まで見えなかったものが見えてくるはずですよ。
コメント