消除无缝网格图像中的垂直/水平间隙

Question

我在创建无缝照片网格时遇到了一些麻烦。我已经在互联网上搜索了一段时间，我找不到任何解决方案。

我的图像网格都是正方形且大小相同。我通过添加img { vertical-align: middle; }

消除了每一行发生的差距

现在我需要消除每列中出现的垂直空白区域。

Here is the site I am working on

Here is a screenshot of the site I am working on

您可以看到图像的左右两侧有大约2-3px的空白区域。我已经尝试了margin:0和padding:0几乎所有我能想到的事情。

我使用display:inline-block设置了网格。我需要保留这个。我不想使用花车。

我的HTML非常简单：

<ul><li><a href="#"><img src="0.jpg" /></a></li></ul>

Answer 1

这样做可以消除每列中出现的垂直空白区域：

#photos li img { width: 102% }

例如：

Answer 2

删除width columns.css第101行

Answer 3

你为什么不想使用花车？这是我的建议：

ul { overflow: auto; width: XXXpx; }

li {
  float: left;
  width: XXXpx;
  margin: 0px;
  padding: 0px;
  outline: 0px;
}



<ul>
  <li><a href="#"><img src="img1.jpg" alt=""></a></li>
  <li><a href="#"><img src="img2.jpg" alt=""></a></li>
  <li><a href="#"><img src="img3.jpg" alt=""></a></li>
</ul>

Answer 4

非常感谢我在stackoverflow上看到过的最快响应。

然而，我犯了一个愚蠢的错误。由于我使用的是inline-block，我忘了它在HTML中占了空白。我删除了所有的空白，现在它似乎工作。

@ MartinCortez的答案似乎也有效，如果我不想愚弄空白。

Answer 5

我知道现在有点晚了但是我想我会分享我会做的事，因为其他人可能觉得它很有用。

正如@davecave所说这是一个空白问题，但删除HTML中的空格并不总是理想的。

在我通常做的包含元素上：

#container {
    letter-spacing: -4px;
    word-spacing: -4px; 
}

并在内联块的项目上重置值：

.item {
    letter-spacing:0;
    word-spacing:0;
}