`display: inline-block`の罠と処方箋：なぜ「隙間」は生まれ、どう制圧すべきか
フロントエンドの現場で、HTMLのインライン要素（`a`, `span`, `strong`など）を扱う際、こんな経験はありませんか？
「幅や高さを指定したい。でも、`display: block`にすると横並びが崩れてしまう。じゃあ`inline-block`だ！」
……そして実装した瞬間、「あれ、要素の間に謎の隙間があるぞ？」と頭を抱える。これ、新人からベテランまで、誰もが一度は通る「`inline-block`の洗礼」です。今日は、この愛すべき、しかし少し厄介なCSSのプロパティについて、ブラウザの裏側の挙動から現代的な解決策まで、現場の知見を詰め込んで解説します。
—
なぜ`inline-block`には「隙間」が生まれるのか
まず結論から言いましょう。`inline-block`の隙間は、バグではありません。「仕様」です。
ブラウザはHTMLを解析する際、タグとタグの間の改行やスペースを「テキストノード（空白文字）」として認識します。`inline`や`inline-block`の要素は、その名の通り「テキスト」のように扱われるため、HTML上の改行が「半角スペース」としてレンダリングされてしまうのです。
フォントサイズが16pxなら、その空白文字も大体4px前後の幅を持ちます。これが、横並びのボタンやナビゲーションメニューの間に現れる「謎の隙間」の正体です。
現代の現場で選ぶべき「隙間の消し方」3選
この問題を解決するために、昔は「HTMLの閉じタグをあえて改行しない」という、保守性の低いコードを書くこともありました。しかし、現代のフロントエンド開発において、それはスマートな選択肢ではありません。以下のいずれかの手法を採用するのがベストです。
1. 親要素のフォントサイズを0にする（王道）
最も確実で、ブラウザ間の挙動が安定している方法です。
.container {
/ 親のフォントサイズを0にして空白文字の幅を消滅させる /
font-size: 0;
}
.item {
display: inline-block;
/ 子要素で必要なフォントサイズを再定義する /
font-size: 16px;
}
2. Flexboxで解決する（推奨）
そもそも、現代のレイアウトにおいて「横並び」を作りたいのであれば、`inline-block`を使わずに`display: flex`を使うのが正攻法です。
.container {
display: flex;
gap: 10px; / 隙間の制御も簡単 /
}
※もし「インライン要素の特性（親のテキスト位置に追従する等）」が必要な場合のみ、`inline-block`を検討してください。
3. HTMLのコメントで詰める（小技）
どうしてもCSSで調整できない特殊なケースでは、HTML上でコメントを挟むことで改行を無効化します。
—
実践：`inline-block`を使いこなすパターン
`inline-block`が真価を発揮するのは、「行の途中に高さを変えたアイコンを入れたい」「親の`text-align: center`の影響を受けて、横並びのボタンを中央寄せしたい」といったケースです。
以下に、実務で使える「レスポンシブ対応のボタン群」のサンプルコードを置いておきます。
/ 汎用ボタンコンポーネント /
.btn-group {
text-align: center; / これだけで中のinline-blockが中央寄せされる /
font-size: 0; / 隙間対策 /
}
.btn {
display: inline-block;
padding: 10px 20px;
margin: 5px; / 隙間対策をしていればmarginも計算通りに動く /
font-size: 16px; / 継承を打ち消す /
background: #007bff;
color: #fff;
text-decoration: none;
border-radius: 4px;
vertical-align: middle; / 行内での配置を整える /
/ 高さを指定しても崩れないのがinline-blockの強み /
height: 40px;
line-height: 40px;
}
プロからのアドバイス：`vertical-align`を忘れるな
`inline-block`を使う際、もう一つ注意すべきなのが`vertical-align`です。デフォルト値は`baseline`（ベースライン合わせ）であり、要素内のテキストの並び順によっては、微妙に高さがズレることがあります。
基本的には `vertical-align: middle;` を指定しておくことで、意図しないズレを封じ込めることができます。ここを意識できるかどうかで、UIの完成度が一段階上がります。
まとめ
- 隙間の原因は「改行」: ブラウザは空白文字を律儀に表示しているだけ。
- 解決策: `font-size: 0` または `Flexbox` を使い分ける。
- 調整: `vertical-align: middle` で垂直位置を揃える。
`inline-block`は決して古い技術ではありません。その特性を深く理解し、ブラウザの挙動をコントロール下に置くこと。それができれば、どんな複雑なUIも、泥臭いハックに頼らずに美しく実装できるようになります。
さあ、エディタを開いて、まずは親要素に `font-size: 0` を当てることから始めてみてください。それだけで、世界（とあなたのレイアウト）は驚くほど綺麗になるはずです。
コメント