リスト横並びで画像を並べた時、display:inline;を指定して水平に並べた場合、要素と要素の間に隙間が生じます。
これは空白類文字といって、ソースコード内の改行は半角スペースくらいの空白に変換するそうです。
1. <li>タグを改行せず、一行に並べる
2. <li>タグの間にコメントタグを入れる
3. </li>の閉じタグを途中で区切る
4. display:inline;をやめて、float:left;で横並びにする
5. display:table-cell;で横並びにする
display:table-cell;はIEでは対応していない為、モダンブラウザとIEで記述を分けなければならない。
6. font-sizeで隙間を消す
横並びの要素を包括する要素にfont-size:0;を指定すれば、隙間は消えます。<li>を横並びにするなら、<ul>にfont-size:0;