水平和垂直对齐图像，无间距

我有一组 4 张图像，我正在尝试垂直和水平对齐它们。

问题：

我无法消除它们之间的小垂直间距。

Please check out the issue reproduced in Fiddle

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;
}

这看起来很简单，但除了手动指定高度之外，我无法获得间距100px，它没有响应，因此不可行。

Adding vertical-align:top on the img元素将消除间隙。默认为baseline.

作为旁注，bottom and middle也工作。

jsFiddle 示例

img {
    vertical-align:top;
}

Adding display:block to the img元素也有效。（例子）

img {
    display:block;
}