cssでリストの隙間を消す方法

Question

次のようなリスト構造を作成しました。
2行2列の画像の並びを作成しています。

<ul> <li><img src=""></li> <li><img src=""></li> <li><img src=""></li> <li><img src=""></li> </ul>

cssは以下の通りです
ul {
width:200px;
list-style:none;
}

li {
float:left;
width:100px
}

この場合で表示すると4つの画像それぞれの上下左右に少しの隙間ができてしいます。
そこで

li img {
vertical-align:bottom;
}

を追加することで上下の余白をなくすことができました。

あとは左右の余白を無くしたいのですが、どうしたらいいでしょうか？

また、このように隙間なく2行2列の画像を並べる時、みなさまはどのようなhtml構成でどのようなスタイルを当てていくのですか？

Answer 1

    <li><img src=""></li><!--
 --><li><img src=""></li><!--
 --><li><img src=""></li>

のように</li>と<li>の間に改行を入れないようにすれば大丈夫です。

もし、画像だけでしたら

ul{
    font-size: 0;
}

を追加してみてもいいかもしれません。

Answer 2

4つの画像それぞれの上下左右に少しの隙間ができてしいます。

その隙間が、<img/>のmarginなのか<li/>のmarginかpaddingなのかわからないので、
chromeのデベロッパーツールでみてみましょう。

右上の三ボタンのところからその他のツール＞デベロッパーツールとたどります。

開いたウィンドウの該当タグを選択し、右側のペインで一番下までスクロールさせると、４重に囲まれた矩形があるはずです。
（どれが該当タグか分からない時は、画面左上の虫眼鏡をクリックしてから調べたいエレメントにマウスカーソルを合わせましょう）

濃いオレンジはmargin、薄いオレンジがborder、緑がpadding、青がエレメント本体の大きさです。

marginとborderが0であれば余白はできないので、それが0ではない要素のその属性について、

margin: 0px;

あるいは

padding: 0px;

すると、ご希望の状態になるかと思います。