「display:inline-block」での隙間(余白)を消す方法

display:inline-block;を使用すると、余計な隙間ができます。これを取り除く方法を4つ紹介します。

改行しない

display:inline-block;を適用させた要素をソース内で改行していると、余白ができるようです。

htmlの見栄えを無視して圧縮したような記述にしましょう。

具体例は以下です。

余白できるパターン

<ul>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
</ul>

余白できないパターン

<ul>
  <li style="display:inline-block;"></li><li style="display:inline-block;"></li><li style="display:inline-block;"></li><li style="display:inline-block;"></li><li style="display:inline-block;"></li>
</ul>

letter-spacingでマイナスを指定

なぜこれで解決するか意味不明ですが、これやれば解決するんだぐらいに思っておくといいと思います。

コードの都合上、改行を除去するのが面倒な場合はletter-spacingでcssに適用しちゃいましょう。これは、inline-blockを指定した要素を囲む親要素に適用させる必要がある点だけ注意してください。

余白できるパターン

<ul>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
</ul>

余白できないパターン

<ul style="letter-spacing:-1em;">
  <li style="display:inline-block;letter-spacing:normal;"></li>
  <li style="display:inline-block;letter-spacing:normal;"></li>
  <li style="display:inline-block;letter-spacing:normal;"></li>
  <li style="display:inline-block;letter-spacing:normal;"></li>
  <li style="display:inline-block;letter-spacing:normal;"></li>
</ul>

font-sizeを0に!

これもハック的な書き方です。理屈ではなくこうなるもんだと覚えてください。これも親要素に指定して、子要素で再度指定し直す感じです。

余白できるパターン

<ul>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
  <li style="display:inline-block;"></li>
</ul>

余白できないパターン

<ul style="font-size:0;">
  <li style="display:inline-block;font-size:16px;"></li>
  <li style="display:inline-block;font-size:16px;"></li>
  <li style="display:inline-block;font-size:16px;"></li>
  <li style="display:inline-block;font-size:16px;"></li>
  <li style="display:inline-block;font-size:16px;"></li>
</ul>