display:inlineで横並びにした際に出来る余白を消す方法
- Category ：
- CSS ビギナー向け
li要素をdisplay:inlineを使って横並びにさせる事ってけっこう使うと思うですが、この時にソース上で改行していたり、スペースを開けているとちょっとした余白が出来ると思います。
その余白を消す方法を THE HAM MEDIAさんの「リストを横並びにした時の空白をなくす方法」でいくつか紹介されていた中でほぼ全てのブラウザで対応が出来る方法のみを紹介したいと思います。
…ここからが続き
ベーシック
<ul> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul>
ul { margin: 0; padding: 0; }
li {
list-style-type: none;
display: inline;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
一般的によく使われるXHTMLのソースです。サンプルページを見て貰った分かる通りちょっとした余白が出来てしまいます。
余白消す方法 1 改行をしない
<ul> <li>サンプル</li><li>サンプル</li><li>サンプル</li><li>サンプル</li><li>サンプル</li> </ul>
ul { margin: 0; padding: 0; }
li {
list-style-type: none;
display: inline;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
余白消す方法 2 コメントアウトを使う
<ul> <li>サンプル</li><!-- --><li>サンプル</li><!-- --><li>サンプル</li><!-- --><li>サンプル</li><!-- --><li>サンプル</li> </ul>
ul { margin: 0; padding: 0; }
li {
list-style-type: none;
display: inline;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
余白消す方法 3 table-cellを使う
<ul> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> <li>サンプル</li> </ul>
li {
list-style-type: none;
display:table-cell;
*display:inline;
*zoom:1;
margin:0;
padding:0;
background: #222;
color: #FFF;
}
まとめ
table-cellを使う事で余白を消せる事は初めて知りましたね。
どの方法が正解とはないので、どれを使うは自分次第でよいかと思いますよ。
Comments
XML応用でないHTMLであれば、li要素の終了タグを省略してli要素のdisplay特性をinline-blockにするのがスマートだと思います。
（最初はli要素の終了タグを省略してli要素のdisplay特性をinlineにすればよいと思いましたが、それだとli要素の最後に空白が入ってしまうことがわかりました。）
サンプル：http://20020101.20000826.net/html/D20110201T102500P0900
ご指摘ありがとうございました！
完全にサンプル2のソースでしたね…すみませんでした。
修正しておきました。
＞余白消す方法 3 table-cellを使う
サンプルソースに
display:table-cell;
が含まれてないですよ。