なぜか隙間ができる？「line-height」とインライン要素の不思議な関係を紐解く
Web制作を始めたばかりの頃、誰もが一度は「あれ、なんで画像やテキストの周りに謎の隙間ができるの？」と頭を抱えた経験があるはずです。CSSで `height` を指定しても、なぜかうまくいかない。
実はそれ、「インライン要素」と「line-height」の密接な関係を知ると、パズルのピースがカチッとはまるように解決するんです。今日は、CSSの「見えないルール」を一緒に解き明かしていきましょう。
—
1. 文字には「見えない枠」があることを知ろう
まず、テキストを想像してみてください。一行の文章を書くとき、私たちはノートの罫線の中に文字を収めますよね。Webブラウザの世界でも全く同じことが起きています。
すべてのインライン要素（`` や `` など）やテキストは、「コンテンツ領域」という文字そのものの高さと、上下に少しだけ余裕を持たせた「行ボックス（line-box）」という領域の中に住んでいます。
ここで登場するのが `line-height` です。
`line-height` は、この「行ボックス」の高さを決める司令塔です。
- フォントサイズ（font-size）: 文字そのものの大きさ
- 行の高さ（line-height）: 文字を含めた「一行分」の高さ
この「行の高さ」から「文字の大きさ」を引いた残りのスペースが、上下に均等に配分されて「行間」になります。これが、私たちが普段目にしている「読みやすい文章」の正体なんです。
—
2. 困った現象：なぜ親要素の高さが変わっちゃうの？
よくあるのが、`
実は、親要素の高さは「子要素のテキストの高さ」ではなく、「その行の line-height」によって決定されます。
実践コードで見てみましょう
まずは、このコードをエディタに貼り付けてブラウザで開いてみてください。`line-height` がどう影響しているかが見えてきます。
解説：
上のコードでは、`span` に高さを指定していないのに、親の `div` が高さ80pxの巨大な箱になっていますよね。これは、`div` の `line-height` が80pxに設定されているため、中のテキストが「80pxの高さの行」として計算されているからです。
—
3. インライン要素と仲良く付き合うためのヒント
初学者の皆さんが最もつまずきやすいのが、「インライン要素に `padding` や `margin` をつけても、上下がうまくいかない！」というケースです。
これには理由があります。`` や `` のようなインライン要素は、もともと「文章の一部」として振る舞うようにできているからです。
もし、ボタンのように上下の余白をしっかり取りたい場合は、`display: inline-block;` を使ってみてください。
- `inline` のまま: 文章の一部なので、`line-height` に従順。
- `inline-block` に変身: インラインの「横に並ぶ」という性質を持ちつつ、ブロック要素のように「高さや上下の余白」を自分でコントロールできるようになる。
「魔法の杖」のように聞こえるかもしれませんが、これを知っているだけでレイアウトの自由度が劇的に上がりますよ。
—
まとめ：怖がらなくて大丈夫！
最初は「line-height」や「行ボックス」という概念、少し難しく感じるかもしれません。でも、「すべての文字には見えない上下の余白（行ボックス）が必ずセットでついてくる」ということさえ覚えておけば、レイアウト崩れに遭遇したとき、「あ、これは行の高さが影響しているかも？」とすぐに気づけるようになります。
Web制作は、こうした小さな仕組みの積み重ねです。一つずつ理解していけば、必ず思い通りのデザインが作れるようになりますよ。
「ここがまだ少し分かりにくいな」と思ったら、またいつでも聞きに来てくださいね。あなたのコードが、今日も明日も美しく表示されますように！
コメント