「なぜか隙間ができる…」HTMLのインライン要素、その正体は「改行」だった！
Web制作を始めて少し慣れてくると、誰もが一度はこんな「謎の現象」に頭を抱えます。
「CSSで余白なんて指定していないのに、なぜか要素の間に微妙な隙間ができる…！」
横並びにしたメニューボタンや、アイコンとテキストの間に見え隠れする、あの数ピクセルの正体。実はこれ、コードを書いている私たち自身が、HTMLのソースコード上で入れた「改行」や「スペース」が原因なんです。
今回は、この「インライン要素の隙間問題」について、身近な例え話を交えながら、どうして起きるのか、そしてどう解決すればいいのかを優しく紐解いていきましょう。
—
犯人は「HTMLのソースコード」にいた！
まずは、なぜ隙間ができるのか、イメージしてみましょう。
皆さんがお買い物でレジに並んでいる場面を想像してください。前の人が動くと、自然と後ろの人も少しずつ間隔を空けて並びますよね。HTMLのインライン要素もこれと同じなんです。
HTMLを書くとき、私たちは読みやすくするために、ついつい改行やインデント（スペース）を入れますよね。
ブラウザは、このコードを読み取るときに「ああ、ここには改行があるから、単語と単語の間と同じように『スペース』を一つ入れておこう」と親切心で判断します。
つまり、HTML上の「改行」や「タブ」が、ブラウザにとっては「文字と文字の間のスペース」として認識されてしまっているんです。これが隙間の正体です。
—
どうして「インライン要素」だけなの？
「ブロック要素（divなど）ならこんなこと起きないのに！」と思われるかもしれません。
インライン要素（`a`, `span`, `strong`, `em`, `code`, `time`など）は、もともと「文章の一部」として使うためのタグです。文章であれば、単語の間にスペースがないと読みにくいですよね。ブラウザは「文章の一部だから、適度に隙間を開けてあげよう」という、これまた余計な（でもありがたい）配慮をしてくれているわけです。
—
解決策：知っておくと便利な「魔法のテクニック」
では、この隙間を消すにはどうすればいいのでしょうか？ 現場でよく使われる、スマートな解決策を2つご紹介します。
1. 親要素に `font-size: 0;` をかける（一番のおすすめ！）
これが現場で最もよく使われる「特効薬」です。
インライン要素の隙間は「文字のスペース」扱いなので、「じゃあ文字のサイズを0にしてしまえば、スペースも消えるよね！」という発想です。
.container {
/ 親要素の文字サイズを0にする /
font-size: 0;
}
.item {
/ 子要素で必要なサイズに戻すことを忘れずに！ /
font-size: 16px;
display: inline-block;
}
この方法なら、HTMLの書き方を変えずに隙間を消すことができます。
2. HTMLの書き方を工夫する（「コメントアウト」という裏技）
もしCSSをあまり触りたくない場合は、HTMLの書き方を少し工夫します。改行を入れずに横一列に書くという方法もありますが、それだとコードが読みづらくなりますよね。そこで、コメントアウトを隙間に挟むというテクニックがあります。
このように、タグの閉じカッコと次のタグの開始カッコの間にコメントを挟むことで、ブラウザに「ここには改行もスペースもないよ！」と伝えることができます。少し泥臭いやり方ですが、現場で「どうしても隙間が消えない！」という時の最終手段として重宝します。
—
まとめ：つまずいた時は「ブラウザの気持ち」になってみよう
いかがでしたか？「隙間ができる」という現象は、ブラウザが私たちのコードを「文章」として丁寧に解釈してくれた結果だったんですね。
- 隙間の正体： HTML上の改行やスペースが、ブラウザによって「余白」として変換されている。
- 解決策： 親要素に `font-size: 0;` を指定して、隙間を「物理的になくしてしまう」のが一番スマート。
最初は誰でもつまずくポイントです。でも、一度仕組みを理解してしまえば、もう怖くありません。「あ、またブラウザが親切心を出してきたな」と、にっこり笑ってCSSで調整してあげてくださいね。
皆さんのWeb制作ライフが、少しでも快適なものになりますように！応援しています！
コメント