[CSS]display:inline-block で発生する「謎の隙間」を埋めるCSSテクニック集

display:inline-block を用いて要素を横並びに配置する際、意図しない「隙間（マージン）」が発生し、レイアウトが崩れてしまうケースがあります。

本記事では、この悪名高い「インラインブロックの隙間」が発生するメカニズムを解説しつつ、2025年現在でも現場で使える、確実性の高い対処法を5つご紹介します。

なぜ発生する？ display:inline-blockの「謎の隙間」の正体

そもそも、なぜ display:inline-block を適用した要素間に隙間が生まれてしまうのでしょうか？

その根本原因は、CSSではなくHTML側の構造、具体的には「インライン要素間の半角スペースや改行」がブラウザによってテキストとして解釈されるためです。

要素が inline-block になると、その振る舞いは通常のテキスト（文字）と同じようなものになります。HTMLソース上でリストアイテム（li）を記述する際、多くの場合は見やすさのために改行を入れますよね。

この改行や半角スペースが、ブラウザにとっては「単語と単語の間のスペース（空白文字）」として認識されてしまうのです。この空白文字の幅が、要素間の隙間としてレンダリングされるというメカニズムになっています。

隙間を取り除くためのテクニック 5選

①親要素に font-size: 0 を指定

display:inline-block を使いながら最もシンプルに解決する方法が、親要素に対してfont-size: 0を指定すること。

「隙間の正体」である空白文字のサイズをゼロにしちゃうわけですね。

このアプローチの利点は、HTMLのマークアップを一切変更する必要がない点にあります。ただし、子要素（li）には必ず改めて文字サイズを指定し直す必要があるため、スタイリングの手間はわずかに増す点に注意が必要です。

②親要素に letter-spacing または word-spacing を指定

次は、親要素に`letter-spacing: -4pxやword-spacing: -1emのような「マイナス値」を指定する方法です。

この手法もHTML側を汚さずに済みますが、マイナス値の調整が環境によってシビアになりがちです。また、font-size: 0 と同様に、子要素で間隔を normal に戻す（リセットする）作業が不可欠です。

③HTMLのマークアップを詰める（非推奨）

隙間の原因がHTMLソース上の「改行やスペース」であるなら、それらを物理的に消してしまえば良いという考え方ですね。

あるいは、以下のように閉じタグの位置を調整して、改行を入れずに記述する方法も古くから実践されてきました。

技術的にはこれで解決しますが、ソースコードの可読性は低下しちゃいますね。コードレビューや長期的なメンテナンスを考えると、実務では非推奨かなと。。。

④コメントタグを挿入する（非推奨）

inline-block 要素間に存在する空白文字を、ブラウザが無視するHTMLコメントに置き換える手法も存在します。

改行をコメントアウトで包み込むことで、空白文字がレンダリングされないように工夫するテクニックです。

しかし、この方法もやはりHTMLソースを複雑にしてしまうため、前述のマークアップを詰める方法と同様に、あまり推奨されていません。

⑤【2025年推奨】flexbox を利用する

最も現代的で確実な解決策は、そもそも display:inline-block の制約から解放されることです。

現在、要素の柔軟なレイアウトには、専用のCSSモジュールであるFlexbox（Flexible Box Layout Module）を用いるのが主流です。Flexboxを使えば、このインライン要素特有の「隙間」の問題は発生しません。

現在の主要なブラウザは、完全にFlexboxとGrid Layoutをサポートしています。特別な理由がない限り、複数の要素を横並びに配置するタスクには、display:flex の利用を第一に検討すべきですね。

【まとめ】最新技術への移行が最善の解決策！

かつて display:inline-block の隙間を埋める作業もありましたが、現在ではFlexboxの導入によって、無駄な調整から解放されるようになりました。

対処法	確実性	HTMLへの影響	メンテナンス性	備考
display: flex	高	無し	高	2025年最強の解決策。隙間問題が発生しない。
font-size: 0	中〜高	無し	中	子要素の font-size 再設定が必須。
letter-spacing	中	無し	中	値の調整が環境依存になりやすい。
HTMLマークアップ詰め	高	あり	低	可読性低下のため非推奨。
コメントタグ挿入	高	あり	低	ソースが煩雑になるため非推奨。

古いテクニックに固執せず、display: flex といったモダンなCSS技術へとレイアウトの基盤を移行することが、生産性を飛躍的に高める鍵となるでしょう！