【実務・中級編】line-heightとインライン要素の高さ計算 – HTML実践ガイド

フロントエンドの現場で、「なぜかボタンの高さが数ピクセルずれる」「行間を変えただけなのにレイアウトが崩れた」という経験、一度はありますよね。

CSSのレイアウトを語る上で、FlexboxやGridは確かに強力です。しかし、どれだけモダンなレイアウトを組もうとも、その中身である「テキスト（インライン要素）」がどう振る舞うかを理解していなければ、本当の意味でピクセルパーフェクトなUIは作れません。

今回は、インライン要素の高さ計算の「正体」と、`line-height`が引き起こすブラウザの裏側での挙動について、実務の視点から紐解いていきます。

—

まず大前提として、インライン要素（`span`, `strong`, `a`など）には、ブロック要素のような「height」という概念が本来ありません。では、ブラウザはどうやって高さを決めているのか。

それは「フォントのメトリクス（デザイン上の高さ）」と「line-height（行の高さ）」の差分、いわゆる「レディング（Leading）」を計算することで決まります。

インライン要素の高さは、以下のロジックで決まります。

1. コンテンツエリア: フォントそのものの高さ。
2. インラインボックス: `line-height`で指定された高さ。
3. レディング: `(line-height – font-size) / 2`

この「レディング」が文字の上下に均等に割り振られ、結果として行の高さが構成されます。ここで重要なのは、インライン要素の背景色（background-color）をつけると、この「line-height」の範囲が可視化されるということです。

—

よくあるトラブルが、「アイコンとテキストを横並びにしたとき、微妙に中央揃えにならない」という問題です。これはインライン要素の上下の余白（レディング）が、フォントの種類によって微妙に異なることが原因です。

これを解決する現場のベストプラクティスを紹介します。

以下のコードをコピーして、ブラウザのインスペクタで確認してみてください。なぜ`span`の高さが`line-height`に引きずられるのか、一目瞭然になるはずです。

/ インライン要素の高さ問題を解決するスタイル /
.container {
font-family: sans-serif;
line-height: 1.5; / ここが基準になる /
}

.highlight {
/ インライン要素に対して背景をつけると、line-heightの範囲が丸見えになる /
background-color: rgba(255, 100, 100, 0.3);

/ よくある事故: paddingを足すとインラインボックスは広がるが、
行全体の高さ（line-height）には影響しないため、
他の行と重なってしまうことがある /
padding: 4px 8px;
border-radius: 4px;
}

code {
/ 等幅フォントは高さが異なりやすいため、vertical-alignで微調整が必要になる /
vertical-align: middle;
}

フロントエンド開発において、インライン要素の
計算ルールを知ることは必須です。特にline-heightは
親要素の行間にも影響を与えるため、注意が必要です。

—

よく見かける「`line-height: 1;` にすれば上下の隙間が消えてレイアウトしやすいのでは？」という考え方。これは半分正解で、半分は罠です。

確かに`line-height: 1`にすると、フォントの高さと行の高さが一致するため、上下の余白は理論上ゼロになります。しかし、フォント自体が持っている「デザイン上の余白（メトリクス）」は消せません。

結果として、OSやブラウザがレンダリングするフォントによって、微妙なズレが残ります。UIコンポーネントを作る際は、以下のルールを守るのがシニアエンジニアの流儀です。

`line-height`は単位なし（数値のみ）で指定する: 親要素のフォントサイズが変わっても追従するようにするためです。
インライン要素に`padding`を多用しない: 行が重なる原因になります。どうしても調整したい場合は、`inline-block`化を検討してください。
中央揃えには`flex`を使う: インライン要素の高さ計算に頼らず、親要素を `display: flex; align-items: center;` にするのが、今のフロントエンド開発における最強の解決策です。

—

インライン要素の高さ計算は、CSSの仕様の中でも最も歴史が古く、かつ泥臭い部分です。しかし、ここを理解しているか否かで、CSSのコーディングにおける「手戻り」の回数は劇的に減ります。

「なぜかズレる」と悩んだときは、まずは `background-color` で要素の範囲を色付けしてみてください。ブラウザが何を基準に高さを計算しているのか、その答えが必ずそこに表示されています。

完璧なUIは、こうした細かい仕様の理解の積み重ねの上にしか成り立ちません。ぜひ、明日からのコーディングで意識してみてください。