リストタグ（li タグ）に対してCSSで display:inline や display:inline-block を使って横並びにしようとすると、なぜか横に2～3ピクセル程度の意味不明な隙間が生じます。

初めて遭遇した時は、慌てて自分の書いたCSSを確認したり、仕方無しに float:left に書き換えたり、マイナスマージンで誤魔化したりしたって方も多いんじゃないでしょーか。

が、この問題の主たる原因はCSS側ではなく、HTML側の「改行」。

とはいえ「見栄え」の問題なので、HTMLをどーこーするのは気持ち悪い。

そんな時には今回ご紹介する対応策！CSSにほんの少々の手を加えるだけで、この謎の隙間から完全に開放されちゃいます！

さぁさぁ、寄ってらっしゃい見てらっしゃい♪

横並びにしたliタグで隙間が出来る問題の対応策

まずは現象を再現してみる

下記マークアップで現象は再現されます。まずはHTMLから。

<ul>
	<li>その１</li>
	<li>その２</li>
	<li>その３</li>
	<li>その４</li>
	<li>その５</li>
</ul>

んで、CSSは下記。分かりやすく li タグの背景に色を付けていますが、現象には影響ありません。

ul li {
	background-color:#eee;
	display:inline;
}

このようなマークアップだと、下記のサンプルページのように「謎の隙間」が発生してしまいます。

横並びにしたliタグ Before

上記サンプルページでは各ブラウザのデフォルトCSSをリセットするのに「CSS Reset - YUI Library」というのをCDNで使用していますが、まぁリセットしてもしなくても当該症状は発生します。

良く見る対応策

比較的よく見かける対応策としては、下記のように「改行部分にHTMLコメントアウトを付ける」というモノ。

<ul>
	<li>その１</li><!--
	--><li>その２</li><!--
	--><li>その３</li><!--
	--><li>その４</li><!--
	--><li>その５</li>
</ul>

うはーﾏﾝﾄﾞｸｾ( ﾟдﾟ)､ﾍﾟｯ

もしくは下記のように「改行を入れず一行で記述する」ってのもよく見かけます。

<ul>
	<li>その１</li><li>その２</li><li>その３</li><li>その４</li><li>その５</li>
</ul>

これもこれで１階層ならまだイイけど、多階層になったら見辛いコトこの上なし。

しかも両対策とも「見栄え」のハナシなのにHTMLの記述に余計な手間をかけなきゃなので、なんか筋違い感も拭えません。

エレガントな対応策

これからの決定版はコレ！HTMLは変わらないので、CSSだけを下記に。

ul {
	font-size:0;
}
ul li {
	font-size:16px;
	background-color:#eee;
	display:inline;
}

ポイントは「親の ul タグに font-size:0 を指定して、その子要素の li タグで改めてフォントサイズを設定する」ってトコ！

こーすると下記サンプルページのように、あの「謎の隙間」は綺麗サッパリ無くなっちゃいます☆

横並びにしたliタグ After

HTMLを汚すこと無く、複雑なCSS記述でもない、なんともエレガントな対応策。

是非一度ご賞味あれ♪