【実務・中級編】line-heightがインラインボックスの高さに与える影響 – HTML実践ガイド

インライン要素と `line-height` の深淵：ブラウザは「高さ」をどう計算しているのか？

フロントエンドの現場で、「なぜかテキストの周りに謎の余白ができる」「アイコンとテキストのベースラインが微妙にズレる」といった問題に頭を抱えた経験はないだろうか。

CSSの仕様書を眺めるのも大切だが、実務で戦う我々にとって重要なのは、「ブラウザがインライン要素の高さという概念をどう解釈しているのか」という裏側のロジックだ。今日は、CSSの中でも特に地味ながら、避けては通れない `line-height` の挙動について、現場の視点から掘り下げていこう。

—

「コンテンツエリア」と「インラインボックス」の決定的な違い

まず大前提として、インライン要素（`span`, `a`, `strong` 等）における「高さ」は、以下の2つの概念の組み合わせで決まることを理解してほしい。

1. コンテンツエリア (Content Area): フォントそのものが持つ高さ。`font-size` によって決定される。
2. インラインボックス (Inline Box): コンテンツエリアに `line-height` を適用して計算された「仮想的な高さ」。

多くのエンジニアが陥る罠は、「`line-height` を大きくしても、フォント自体の高さ（コンテンツエリア）は変わらない」という点を見落とすことだ。

ブラウザは `line-height` の値から `font-size` を引いた差分（leading）を上下に半分ずつ分配する。例えば `font-size: 16px` で `line-height: 24px` とした場合、差分の `8px` が上下に `4px` ずつ割り振られる。これが、私たちが普段目にする行間の正体だ。

なぜ `line-height` でレイアウトが崩れるのか

ここで注意が必要なのは、`span` などのインライン要素に背景色やボーダーを付けたときだ。

`line-height` を設定するとインラインボックスの高さは広がるが、「コンテンツエリア（文字の背景領域）」は `font-size` のままである。つまり、`background-color` を指定すると、文字が乗っている部分だけが色づき、上下の `line-height` 分の余白は「空っぽ」に見える。

これが、「CSSで高さ調整をしているはずなのに、意図した通りのボックスサイズにならない」という不整合の根本原因だ。

実践：現場で使うべき `line-height` のベストプラクティス

現場では、この挙動を逆手に取った「計算させないアプローチ」が好まれる。特に、デザインシステムを構築する際には以下のコードが鉄板だ。

/ インライン要素の挙動を制御する実用的なサンプル /
.text-wrapper {
/

line-heightは単位なしの数値を指定するのが鉄則。
親要素のfont-sizeに依存せず、常に計算結果が継承される。

/
line-height: 1.5;
}

.highlight {
/

strongやspanに適用する場合、インラインボックスと
コンテンツエリアのズレを意識する。
paddingで調整しようとするとインラインボックスが肥大化し、
周囲のレイアウトを破壊するので注意が必要。

/
background-color: rgba(255, 255, 0, 0.3);
padding: 2px 0; / 左右のpaddingはOKだが、上下はインラインの仕様上避けるのが無難 /
}

.code-snippet {
/

code要素などでは、font-familyとの兼ね合いで
ベースラインがズレやすい。必要に応じてvertical-alignで調整する。

/
font-family: monospace;
vertical-align: baseline;
}

フロントエンド・エンジニアへのアドバイス

もしあなたが、「要素の上下にどうしても意図しない余白ができる」と悩んでいるなら、一度デベロッパーツールで `inline-box` の境界線を確認してほしい。多くの場合、それは `line-height` がもたらす「レディング（行間）」と、フォントファイル固有の「メトリクス（グリフの高さ）」の差分だ。

Tips1: インライン要素に高さを持たせたい場合は、`padding` ではなく `line-height` を使う。
Tips2: デザイン上の厳密な上下中央揃えが求められる場合は、インライン要素を `inline-block` に変換し、`line-height` の影響を遮断するのも一つの手だ。
Tips3: 単位なしの `line-height` は、子要素のフォントサイズ変化に対して柔軟に追従する。常に `1.5` などの数値を指定する癖をつけよう。

「ブラウザのデフォルト挙動をハックする」のではなく、「仕様を理解して、仕様の範囲内で美しく設計する」。これこそが、中級から一歩抜け出すためのプロの姿勢だと私は思う。

次回の記事では、この知識を応用した「ベースライン調整によるアイコンの完璧な配置テクニック」について深掘りしていこう。また現場で会おう。