display:inline-blockで隙間があくときの対処法

ブロック要素を横に並べる方法として最近はdisplay:flexが多くなってきました。今でこそ対応していないブラウザは少なくなりましたが、floatとかinline、inline-blockを使う人も少なくはないと思います。

inline-blockはその名の通り、inlineとblockのいいとこ取りしたとても便利なスタイルですけど、これ、横に並べるとなぜか謎の隙間があくことがあります。デベロッパーモードで調べても理由はわからない。

いくつか原因が考えられるので対処法を紹介します。

1. 改行しない

HTMLの改行コードをスペースと認識して隙間があくことがあります。理由はわかりませんが、とにかくそういうことらしいです。なので改行せずに続けて書くと隙間がなくなります。

<ul><li>テスト</li><li>テスト</li><li>テスト</li><li>テスト</li></ul>

liの親要素（ul・ol）にfont-size:0、liにfont-size:0、もしくはfont-size:◯◯pxを記述するという方法があります。

ul,ol {
  font-size: 0;
}

li {
  display: inline-block;
  font-size: 14px;
}

imgタグでも画像の下に隙間ができることがあります。
そのときにvertical-alignを使いますが、inline-blockで効果があるときがあります。

div {
  display: inline-block;
  vertical-align: bottom;
}

これら以外の原因も考えられますが、ほぼこれで解決すると思います。

少し複雑なコーディングを行うときにdisplay: inline-blockを使うことが多いので、どこか崩れたときに原因の特定が難しかったりします。そのときにちょっと試してみて下さい。