display:inline-block;を使用すると、余計な隙間ができます。これを取り除く方法を4つ紹介します。
はにわまんinline-blockで作られる謎の余白を消すための方法です
目次
改行しない
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>おわり
「display:inline-block」で勝手に作られる隙間（余白）を消す方法でした。
どれもカッコいい方法ではないですが、仕方ないですね。。
他の横並びの方法で代替できるなら検討してみるのもいいかもしれません。
