なぜか隙間ができる？CSSの「line-height」とインラインボックスの不思議な関係
Web制作を始めたばかりの頃、誰もが一度は「あれ？なんで文字の周りに微妙な隙間ができるんだろう？」と首をかしげた経験があるはずです。
文字を並べただけなのに、親要素の高さが微妙に大きかったり、``タグで囲った途端にレイアウトが少しズレたり……。この「正体不明の余白」の犯人は、CSSにおける「行の高さ（line-height）」と「インラインボックス」の仕組みにあります。
今回は、この少しだけ厄介で、でも理解すると最強の武器になる「行の高さ」のカラクリを、身近な例えを交えて紐解いていきましょう。大丈夫、少しずつ紐解けば決して難しくありませんよ。
—
1. 文字は「見えない箱」に入っている
まずはイメージしてみましょう。HTMLに書いた文字（``や``など）は、実はただの文字として存在しているわけではありません。CSSの世界では、すべての文字は「インラインボックス」という透明な箱に入れられています。
- コンテンツ領域: 文字そのものの大きさ（`font-size`）
- 行ボックス（line-height）: 文字が入っている「高さの指定」
例えるなら、「クッキーの型抜き」を想像してください。
文字が「クッキーの生地」だとすれば、`font-size`は「生地の大きさ」です。そして`line-height`は、その生地を収める「型枠（フレーム）」そのものなのです。
もし、生地（文字）よりも型枠（line-height）が大きければ、上下に余白が生まれますよね。これが、Webサイトでよく見かける「謎の隙間」の正体です。
—
2. なぜ「line-height」で高さが変わるのか？
CSSで`line-height`を指定すると、ブラウザは「型枠」の高さを強制的に変更します。
重要なのは、「文字そのものは大きくならないけれど、型枠だけが上下に引き伸ばされる」という点です。
実践：コードで確認してみよう
試しに、背景色をつけて「箱」を可視化してみましょう。
普通の行の高さ
背の高い行の高さ
こうして見ると一目瞭然ですよね。`line-height: 3`にすると、文字は20pxのままなのに、背景の箱だけがググッと背が高くなりました。これが、要素同士が重なったり隙間ができたりする原因だったんです。
—
3. つまずきポイント：親要素と子要素の「高さ」
ここが一番の難所かもしれません。`line-height`は「継承」されるプロパティです。
親要素に`line-height`を指定すると、その中の``や``、``といったインライン要素も、強制的にその「型枠」に合わせようとします。
- 解決のヒント: もし特定のインライン要素の高さだけを整えたい場合は、その要素に対して `line-height: 1;` や `display: inline-block;` を活用してみましょう。
- `inline-block`にすると、インライン要素でありながら、高さ（height）や上下の余白（margin）を自分で自由にコントロールできるようになります。これは現場でめちゃくちゃ多用するテクニックですよ！
—
4. 現場で使える「魔法の数字」
最後に、プロの現場でよく使われるちょっとした知見をシェアしますね。
`line-height`の値を指定するとき、単位（pxやem）を付けずに「数値だけ（例: 1.5）」で書くのを見たことはありませんか？
/ おすすめの書き方 /
p {
font-size: 16px;
line-height: 1.6; / 1.6倍の行間になる /
}
なぜ「1.6」という数字だけを書くのか。それは、「親のフォントサイズが変わっても、その倍率を維持して計算し続けてくれるから」です。単位をつけて固定してしまうと、後でフォントサイズを変えた時に行間が崩れてしまうことがありますが、数値だけなら「常に文字の1.6倍の箱」をキープしてくれます。
これこそが、メンテナンス性の高いコードを書くための小さな工夫なんです。
—
まとめ：怖がらずに「箱」を意識しよう
インライン要素の高さ計算は、最初は少しややこしく感じるかもしれません。でも、「文字は透明な箱に入っている」というイメージさえ持てれば、もう大丈夫です。
1. 文字（font-size）は箱の中身
2. 行の高さ（line-height）は箱そのもののサイズ
3. 隙間ができたら、背景色をつけて「箱」を覗いてみる
この3ステップを意識するだけで、レイアウトの微調整が劇的に楽になりますよ。
もし行き詰まったら、焦らずに背景色をつけて「箱」の大きさを確認してみてくださいね。皆さんのWeb制作ライフが、少しでも心地よいものになりますように！
コメント