【入門編】インライン要素とline-heightの計算 – HTML実践ガイド

今日は、この「見えない高さの正体」を、身近な例えを交えて紐解いていきましょう。大丈夫、仕組みさえ分かればもう怖くありませんよ！

—

1. 文字には「見えない余白」が含まれている

まず、想像してみてください。皆さんが使っているWordやメモ帳で、文字のフォントサイズを「16px」にしたとします。でも、実際の行の高さは16pxよりも少し大きくなっていますよね？

これには理由があります。フォントには「文字そのものの高さ」に加えて、「上下に少しだけ余裕（レディング：行間分）」という、いわば「文字の包み紙」のようなものが最初から付いているんです。

CSSで `line-height` を指定するということは、この「文字の包み紙」の厚みを決める作業に他なりません。

• フォントサイズ（font-size）: 文字そのものの背の高さ
• 行の高さ（line-height）: 文字を包む「箱」の高さ

この「箱（行ボックス）」の高さが、親要素の高さや、隣り合う要素との隙間を決定づける大きな要因になっているんです。

—

2. 視覚的に理解する「行ボックス」の正体

インライン要素（`span` や `a` など）は、あくまで「テキストの一部」として振る舞います。そのため、これらに `background-color` を塗ってみると、驚くような結果になることがあります。

ここには素敵なテキストがあります。

このとき、背景色がつく範囲は文字の高さ（20px）ではなく、`line-height` で指定した「50pxの高さ」になりますよね。

ここで重要なポイントが一つ。「インライン要素の高さは、中身の文字ではなく `line-height` によって決定される」ということです。もし親要素の `line-height` がバラバラだと、この「箱」の高さもバラバラになり、行間がガタついたり、画像やボタンと文字のベースラインがズレたりする原因になります。

—

3. 「隙間ができる」現象の正体：ベースラインの秘密

「インライン要素を並べただけなのに、下に微妙な隙間ができる…」
これは、多くの人が最初にぶつかる壁です。

実は、インライン要素は「ベースライン（文字の足を揃えるための架空の線）」に合わせて配置されるルールになっています。そのため、アルファベットの「g」や「j」のように、下に突き出る文字のためのスペース（ディセンダ）が、行の下側にデフォルトで用意されているのです。

どうすれば解決できる？
一番手っ取り早い解決策は、親要素に `line-height: 1;` を指定することです。

/ 親要素に対して設定するだけで、無駄な余白をリセットできます /
.container {
line-height: 1;
}

「1」を指定すると、「文字のサイズ＝行の高さ」となり、余計な「包み紙」の厚みがなくなります。これで、上下の微妙な隙間にイライラすることはぐっと減るはずですよ。

—

4. 現場で使える「魔法のテクニック」

最後に、Web制作の現場でよく使う、文字を綺麗に配置するための知恵を一つ授けますね。

もし「ボタンの中で文字を完全に垂直中央にしたい」ときは、`line-height` と `height` を同じ数値にする、もしくは `padding` を活用するのが鉄板です。

.button {
display: inline-block;
font-size: 16px;
height: 40px;
line-height: 40px; / 高さと合わせることで、文字が垂直中央に！ /
padding: 0 20px;
background: #333;
color: #fff;
}

この方法なら、複雑な計算をしなくても、文字がビシッと真ん中に収まってくれます。

—

まとめ：怖がらなくて大丈夫！

インライン要素と `line-height` の関係、少しイメージが湧きましたでしょうか？

1. `line-height` は「文字を包む箱の高さ」を決めるもの。
2. インライン要素の背景色は、文字サイズではなく `line-height` の高さに依存する。
3. 隙間が気になるなら `line-height: 1` でリセットしてみる。

最初は「なぜこうなるの？」と戸惑うかもしれませんが、CSSは非常に論理的な言語です。今回のように「箱」を意識してコードを書く癖をつけると、レイアウトの崩れが驚くほど少なくなりますよ。

焦らず、一つずつ試しながら、自分だけの「心地よいUI」を作っていきましょう！応援しています！