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

Question

我在创建无缝照片网格时遇到了一些问题。我在互联网上搜索了很长时间，但找不到任何解决方案。

我有一个图像网格，它们都是正方形且大小相同。我通过添加消除了每一行出现的空白img { vertical-align: middle; }

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

这是我正在开发的网站

这是我正在开发的网站的屏幕截图

您可以看到图像的左右两侧大约有 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

删除宽度 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; 
}

并在 inline-block 的项目上重置值：

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