Align Images without spacing horizontally and veritcally

I have a group of 4 images that I’m trying to align vertically and horizontally.

The problem:

I cant get ride of a a small vertical spacing between them.

Please check out the issue reproduced in <a href="http://jsfiddle.net/agconti/cB2NM/" rel="nofollow">Fiddle</a>

html:

<div>
  <ul>
    <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>
    </li>
    <li><a href=""><img src="http://placekitten.com/100/100" alt=""></a>
    </li>
    <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>
    </li>
    <li> <a href=""><img src="http://placekitten.com/100/100" alt=""></a>
    </li>
  </ul>
</div>

css:

* {margin:0; padding: 0;}
div {width: 200px; height: 200px;}
ul { list-style:none; }
ul li {
  display: inline-block;
  float:left;
}

It seems pretty simple, but I haven’t been able to get ride of spacing other than manually specify the height to 100px, which isn’t responsive and so not viable.


solution

Adding vertical-align:top on the img elements will remove the gap. The default is baseline.

As a side note, bottom and middle work too.

jsFiddle example

img { vertical-align:top; }

Adding display:block to the img elements works too. (example)

img { display:block; }