なぜ並べたはずの要素に「謎の隙間」が？CSSのinline-blockを攻略しよう
Web制作を始めたばかりの頃、誰もが一度は「あれ、なんで隙間ができてるの？」と首を傾げる瞬間があります。
例えば、ボタンやアイコンを横に並べたくて `display: inline-block` を使ったときのこと。「CSSで幅も高さも指定したし、marginも0にしたのに、なぜか要素と要素の間に数ピクセルの隙間が空いてしまう……」そんな経験はありませんか？
実はこれ、あなたが書いたコードのせいではありません。HTMLの「改行」が引き起こしている、いわば「Webのちょっとしたお節介」なんです。
今日は、この「謎の隙間」の正体と、現場のプロも使っている解決策を優しく解説しますね。
—
犯人は「HTMLの改行」だった！
なぜ隙間ができるのか。結論から言うと、HTML上の「改行」や「スペース」が、ブラウザによって「半角スペース1個分」として解釈されてしまうからです。
想像してみてください。文章を書くとき、単語と単語の間にはスペースを入れますよね。ブラウザは、`inline-block` 要素を「画像や文字のような一つの単語」として扱います。だから、コード上で要素を改行して書くと、ブラウザは「ああ、ここにスペースがあるんだな」と気を利かせて隙間を作ってしまうんです。
実際に見てみましょう
これだけで、CSSがどんなに完璧でも、画面上には小さな隙間が生まれてしまいます。
—
隙間を消すための「3つの処方箋」
この現象、決して悪いことばかりではありませんが、デザインをピタリと揃えたいときには邪魔ですよね。現場でよく使われる解決策を3つ紹介します。
1. 親要素のフォントサイズを0にする（一番おすすめ！）
一番シンプルで、多くのエンジニアに愛されている方法がこれです。親要素の `font-size` を `0` にしてしまい、子要素で必要なサイズを再指定します。
.container {
font-size: 0; / 親のフォントサイズを0にして、隙間を潰す /
}
.box {
display: inline-block;
font-size: 16px; / 子要素でサイズを戻すのを忘れずに！ /
}
「フォントを0にする」という力技ですが、副作用も少なく、コードもスッキリするので非常におすすめです。
2. HTMLの書き方を工夫する（コメントアウト法）
HTMLの構造を変えずに解決したい場合、改行をコメントアウトで埋めてしまう方法もあります。
これなら、物理的に改行を挟まない（タグを繋げて書く）ことになるので、隙間は発生しません。ただ、コードが少し読みにくくなるのが難点ですね。
3. marginにマイナスの値を入れる
これは少し応急処置に近いですが、`margin-right: -4px;` のようにマイナスの値を設定して、隙間を強引に引き寄せる方法です。ただし、フォントの種類によって隙間の幅が変わることがあるので、微調整が必要になることもあります。
—
最後に：完璧主義になりすぎないで
Web制作の世界では、こうした「ブラウザの仕様」に悩まされることがたくさんあります。でも、安心してください。ベテランのエンジニアでも、最初はみんな同じところでつまずいて、「え、なんで！？」と叫びながら一つずつ学んでいくんです。
今回の「隙間問題」も、「あ、ブラウザが気を利かせすぎちゃったんだな」と、愛嬌のある仕様として捉えてみてください。
もし、どうしても隙間が消えなくてイライラしてしまったら、一旦PCを閉じて深呼吸しましょう。戻ってきたときには、きっと解決策がパッと閃くはずです。
あなたのWeb制作ライフが、少しでも快適で楽しいものになりますように！応援しています。
コメント