inlineを使うと隙間が出来る

以前からよく話題になるし、ウェブ系ブログでもよく取り上げられているdisplay:inlineやinline-blockの問題。リストを簡単に横に並べることが出来るんですが、それぞれのリスト間に隙間が出来るという問題があります。それらに対応するには、様々な方法があるわけですが、もう一度ここで整理してみたいと思います。

今回のサンプルページ

1.改行しない

リストを改行せずに記述するだけ。これだけで隙間がなくなります。

<ul>
	<li>あああ</li><li>あああ</li><li>あああ</li>
</ul>

2.liタグ間をコメントアウトする

どのブラウザでも問題なく隙間が解消されていました。ただ、こういったコメントアウトの使い方を嫌う人には使いづらいですが、更新とかほとんど必要のない箇所であれば選択肢としてアリかと。

<ul>
<li>あああ</li><!--
--><li>あああ</li><!--
--><li>あああ</li>
</ul> 

3.font-sizeを0.1pxに

本当は0pxとしたいところだけど、safariで0指定が無効のため0.1とします。だけど、テキストを使う場合はそのままだと文字サイズが小さなってしまうので、1pxは親要素に指定して、子要素には元の文字サイズを指定して戻してあげます。ただ、WindowsはIE7/IE8/Safari/Chrome、macはOpera/firefoxで隙間が解消されませんでした。

<ul>
	<li>あああ</li>
	<li>あああ</li>
	<li>あああ</li>
</ul>
ul {
 font-size: 0;
}
li {
 display: inline;
 font-size: 14px;
}

4.letter-spacingを-0.4emに

ホワイトスペース分をネガティブマージンで相殺する手法です。テキストを使う時は、文字間が詰まり過ぎるので親要素に一旦letter-spacing:-0.4emを指定し、子要素でnormalに戻して使います。結構、これで隙間がなくなるって書かれているブログも多いようなんですが、本当でしょうか。。私の環境ではいつくかのブラウザで隙間が解消されませんけど…。

<ul>
	<li>あああ</li>
	<li>あああ</li>
	<li>あああ</li>
</ul>
ul {
 letter-spacing: -0.4em;
}
li {
 display: inline;
 letter-spacing: normal;
}

windowsはIE7/Opera、macはOpera/firefoxで隙間が埋まりませんでした。また、Windowsのchrome/safariとmacのSafarでは画像が重なる症状も。

5.table-cellを使う

感想としてはこれが一番スマートでした。ただし、IE8未満は非対応なのでハックと一緒に使います。IE8未満は一旦inlineにしてからzoomでhaslayoutをtrueにするだけ。簡単です。これだけで私が確認できる全てのブラウザで隙間解消しました。ただ、テーブルセルを使う場合はセルのmarginが使えないんですよね。幅サイズが決まっている場合は、純粋にfloatを使ったほうが簡単ですかね。

<ul>
	<li>あああ</li>
	<li>あああ</li>
	<li>あああ</li>
</ul>
ul {
 letter-spacing: -0.4em;
}
li {
 display: table-cell;
 /* for IE 6/7 */
 *display: inline;
 *zoom: 1;
}

で、色々と試してみた結果「どれがいいの?」って話なんですが、それは環境次第ですよね。幅固定の要素のものなら使い慣れたfloatで構築したほうがいいだろうし、「ちょっとの隙間なんて問題ない」というのであればinlineでサクッと済ませちゃっていいと思うんです。更新頻度やコードの見やすさとかも関係してくるだろうし、どこで折り合いを付けるか、ってのも判断材料の一つですよね。