inline-blockの余白（隙間）をなくす方法【CSS】

この記事の前提条件

対象: CSS(全モダンブラウザ対応)
難易度: ★☆☆
所要時間: 約5分

display: inline-block;で要素を横並びにしたら、なぜか要素と要素の間に、指定した覚えのない謎の隙間ができてしまった…という経験はないでしょうか。marginを疑って値を色々変えてみても直らず、原因が分からず時間を溶かしてしまいがちなCSSの有名なつまずきポイントです。

目次非表示

原因: HTMLの改行やスペースが余白として表示される
解決法1. 親要素にfont-size: 0を指定する
解決法2(おすすめ): HTMLのタグをくっつけて書く
まとめ

目次へ

原因: HTMLの改行やスペースが余白として表示される

実はこの隙間、CSSの不具合ではありません。inline-block要素は、HTMLソースコード内の改行やスペースをそのまま「半角スペース1文字分」の余白として表示してしまうという仕様があるためです。

<ul>
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>

見やすさのために改行してインデントを付けているだけなのに、その改行分がそのまま隙間として画面に出てしまう、というのが正体です。

解決法1. 親要素にfont-size: 0を指定する

隙間の正体が「半角スペース1文字分」なら、文字サイズ自体を0にしてしまえば隙間も0になります。手軽な解決法として昔からよく使われる方法です。

ul {
  font-size: 0;
}

.item {
  font-size: 16px; /* 子要素側で文字サイズを指定し直す */
}

ただし、この方法は親要素のfont-sizeを0にしてしまうため、子要素側で必ず文字サイズを指定し直す必要があり、指定を忘れると文字が表示されなくなってしまうという副作用があります。

解決法2(おすすめ): HTMLのタグをくっつけて書く

CSSを一切いじらず、HTML側でタグの閉じ・開きを改行せずにくっつけて書いてしまうという、原因に対してもっとも直接的な解決法もあります。

<ul>
  <li class="item">1</li><li class="item">2</li><li class="item">3</li>
</ul>

ソースコードの見た目が少し崩れて読みにくくなるのが唯一のデメリットですが、CSS側に副作用が一切出ないため、実務ではこちらもよく使われます。

💡 今ならflexboxで根本的に回避できる

そもそも論として、今は横並びレイアウトをinline-blockで組む必要はほとんどありません。親要素にdisplay: flex;を指定すれば、この隙間問題自体が発生しない上に、要素の配置調整もはるかに柔軟にできます。既存のコードでinline-blockに悩まされている場合を除き、新しく組むレイアウトはflexboxを使うのがおすすめです。