inline-blockで並べたときに発生する隙間を消すためのいろいろな小技のまとめ

floatを使わずに要素を横に並べる方法として用いられる事の多いinline-block。自分も結構な頻度で使用しています。ですが、普通に使うとなぜか数ピクセルの隙間が発生してしまいます。
この隙間の対処として、htmlのみで対処する方法とcssのみで対処する方法をまとめてみました。

隙間が発生する原因は改行コードだそうです。
inline-blockを使っているタグを改行させて記述すると、改行コードを拾って表示させているみたいです。

サンプルページを表示

<ul>
<li>box.1</li>
<li>box.2</li>
<li>box.3</li>
<li>box.4</li>
</ul>

li {
	display: inline-block;
	background-color: #DDD;
	border: solid 1px #CCC;
	padding: 30px;
}

これって、imgでも同じようになるやつですよね？きっと。
ソースを可読性をあげようと整理しながら書いているときに、imgの次に出てくるタグを改行させて書いて表示したら、同じように隙間が発生したことありましたし。

対処方法はhtmlのみ、cssのみといくつか方法があるので、現場の状況にあった方法で対処していくのがよいかなと思います。
※今回の説明では、IE6、7は省きます…

1.[htmlのみ]改行しない

これは自分がよく用いている方法です。
手間もかからずに簡単なのが長所ですが、短所としてはinline-blockを使用しているタグを1行で書く必要が出てくるので、内容によっては1行がビックリするくらい長くなることも。
あと、他の人が編集をしたときに可読性を気にして改行されたら終わりです。

サンプルページを表示

<ul>
<li>box.1</li><li>box.2</li><li>box.3</li><li>box.4</li>
</ul>

2.[htmlのみ]コメントアウトを付ける

コメントアウトをタグの終わりと、次の開始タグの先頭につける方法です。
ソースの見た目が気持ち悪いので、好んで使用はしていません。

サンプルページを表示

<ul>
<li>box.1</li><!--
--><li>box.2</li><!--
--><li>box.3</li><!--
--><li>box.4</li>
</ul>

3.[htmlのみ]閉じタグを付けない

閉じタグをあえて外す方法です。
ソースはなんとなく変な感じがしますが、HTML5では閉じタグが無くても問題ないようです。
HTML5以外では使用するのは怖いですね。(最近のブラウザは無駄に頭がいいので、普通に正しいソースと解釈されそうな気がしますが)

サンプルページを表示

<ul>
<li>box.1
<li>box.2
<li>box.3
<li>box.4
</ul>

4.[cssのみ]letter-spacingで対応

これは最近知りました。
親要素で文字間を詰めて、子要素で文字間を通常に戻す方法です。

cssのみで対応できるので、よろこんで使用してみたところ、IEで見事に1･2pxくらいずれました。IE以外は問題なさそうでした。さすがIEです。
この方法を使うのであれば、IEのバージョンでそれぞれのハックをかける必要があります。

サンプルページを表示

ul {
	letter-spacing: -.40em;
}

li {
	letter-spacing: normal;
}

サンプルページを見てもらえればわかりますが、どの方法でも隙間は無くなりました。
他にもいくつか方法はありますが、対処として幅広く使われているこのあたりを押さえておけば、どれかで対応できるんじゃないでしょうか。

無理そうだったら、諦めてfloatに逃げましょうｗ