display:inline-blockで横並びにする際に発生する隙間（余白）を消すベストな方法

リストを横並びで表示したい場合に、display: inline-block;を利用する方も多いだろう。グローバルメニューを構築する際などによく使う。

だが、このテクニックのデメリットとして、自動的に数pxの隙間が入ってしまう。この不必要な隙間をなくす方法は理解しておこう。
※floatを使えば解決できるが、そうではなくてあくまでもdisplay: inline-block;を利用しつつ隙間を消す。

display:inline-blockで横並びにする際に、隙間を消す

HTMLは解説するまでもないが…。

<ul>
	<li><a href="index.html">メニュー</a></li>
	<li><a href="index.html">メニュー</a></li>
	<li><a href="index.html">メニュー</a></li>
	<li><a href="index.html">メニュー</a></li>
	<li><a href="index.html">メニュー</a></li>
</ul>

さて、CSSで以下のように記述しよう。

ul {
 font-size: 0;
}
ul li {
 font-size: 15px;
 display: inline;
}
ul li a {
 display: inline-block;
}

親要素のulにてフォントサイズを0にし、liで復活させよう。

他にもいくつか方法があるが、これが最もシンプルで使い勝手がよい。