水平型リストで画像を並べた時の隙間を消す6つの方法

display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。
これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。

XHTML&CSSを記述

 
li {
    display: inline;
}
 

 
<ul>
    <li><img src="/images/tips/h_list_space_01.png" alt="HTML" /></li>
    <li><img src="/images/tips/h_list_space_02.png" alt="CSS" /></li>
    <li><img src="/images/tips/h_list_space_03.png" alt="JavaScript" /></li>
    <li><img src="/images/tips/h_list_space_04.png" alt="PHP" /></li>
</ul>
 

→隙間ができるサンプル

1. <li>タグを改行せず、一行に並べる

簡単にできますが、ソースが読みにくいのが難点。

 
<ul>
    <li><img src="/images/tips/h_list_space_01.png" alt="HTML" /></li><li><img src="/images/tips/h_list_space_02.png" alt="CSS" /></li><li><img src="/images/tips/h_list_space_03.png" alt="JavaScript" /></li><li><img src="/images/tips/h_list_space_04.png" alt="PHP" /></li>
</ul>
 

→隙間を消したサンプル1

2. <li>タグの間にコメントタグを入れる

無意味なコメントをつけるのも、コーダーとして納得いかないところ・・・。

 
<ul>
    <li><img src="/images/tips/h_list_space_01.png" alt="HTML" /></li><!--
 --><li><img src="/images/tips/h_list_space_02.png" alt="CSS" /></li><!--
 --><li><img src="/images/tips/h_list_space_03.png" alt="JavaScript" /></li><!--
 --><li><img src="/images/tips/h_list_space_04.png" alt="PHP" /></li>
</ul>
 

→隙間を消したサンプル2

3. </li>の閉じタグを途中で区切る

中途半端なところで改行するのは、気持ち悪いです。

 
<ul>
    <li><img src="/images/tips/h_list_space_01.png" alt="HTML" /></li
    ><li><img src="/images/tips/h_list_space_02.png" alt="CSS" /></li
    ><li><img src="/images/tips/h_list_space_03.png" alt="JavaScript" /></li
    ><li><img src="/images/tips/h_list_space_04.png" alt="PHP" /></li>
</ul>
 

→隙間を消したサンプル3

4. display:inline;をやめて、float:left;で横並びにする

最終的にこれに落ち着くような。もちろん、liタグの後はfloatをクリアして下さい。

 
li {
    float: left;
}
 

→隙間を消したサンプル4

5. display:table-cell;で横並びにする

display:table-cell;はIEでは対応していないので、モダンブラウザとIEで記述を分けなければいけません。

 
li {
/* for Modern Browser */
    display:table-cell;
    
/* for IE */
    *display:inline;
    *zoom:1;
}
 

→隙間を消したサンプル5

「リストを横並びにした時の空白 - ciqlie」で紹介されていた方法です。

主要ブラウザで問題なく使えます。floatが嫌で、HTMLもシンプルにしたい、ハックを使うのが特に嫌ではない場合にはいいと思います。

6. font-sizeで隙間を消す

横並びの要素を包括する要素にfont-size:0;を指定すれば、隙間は消えます。<li>を横並びにするなら、<ul>にfont-size:0;みたいな。

 
ul {
    font-size: 0;
}
ul li {
    display: inline;
}
 

→隙間を消したサンプル6

ただし、<li>にテキストが含まれている場合、<ul>で指定したfont-size:0が効いてテキストが表示されませんので、その場合は、<li>にfont-size:16px;（ブラウザのデフォルト数値）など指定して、その中の<a>にfont-size:0.8em;など施してあげればいけると思います。こんなカンジで。

 
ul {
    font-size: 0;
}
ul li {
    display: inline;
    font-size: 16px;
}
ul li a {
    font-size: 0.8em;
}
 

09.09.10追記：Webkit系ブラウザ、IE6・7では、この方法は効きませんでした。