在水平和垂直方向上间隔对齐图像

Question

我有一组4张图像，我试图垂直和水平对齐。

问题：

我不能在他们之间骑一个小的垂直间距。

请查看 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的高度之外，我还没有能够获得间距，这是没有响应的，所以不可行。

Answer 1

在vertical-align:top元素上添加img将消除差距。默认值为baseline。

作为旁注，bottom和middle也有效。

jsFiddle example

img {
    vertical-align:top;
}

将display:block添加到img元素也可以。 (example)

img {
    display:block;
}

Answer 2

尝试 保证金：0自动; border：0px;

Answer 3

如果你没有文字，你可以说

ul {
    font-size: 0;
}

这消除了空间，请参阅修改后的JSFiddle