display:inlineで横並びにした際に出来る余白を消す方法

display:inlineで横並びにした際に出来る余白を消す方法

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

2011年02月01日 10:41

MIYA

MIYA

ご指摘ありがとうございました!

完全にサンプル2のソースでしたね…すみませんでした。
修正しておきました。

2009年04月30日 13:42

匿名

匿名

>余白消す方法 3 table-cellを使う
サンプルソースに
display:table-cell;
が含まれてないですよ。

2009年04月30日 10:44

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article