带有浮动的图像之间的边距：左

Question

我想把8张图片排成2行，问题是图片下方会产生5px的边距。你可以看到 in the fiddle 图像在 <div> 中 position:relative，那是因为我要在里面放一个带有附加信息的隐藏框（它有效，但我没有将它添加到 fiddle 以免使事情复杂化）。

感谢您的帮助！

.projects{
    overflow:auto;
}

.project{
    width: 25%;
    float: left;
    position: relative;
}

.project img{
    width: 100%;
}

Answer 1

这是由于垂直对齐。解决此问题的一种简单方法是在 img 元素上指定 vertical-align: top;：

.project img {
    vertical-align: top;
    width: 100%;
}

Margins between images with float: left