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

【问题标题】：Eliminating vertical/horizontal gaps in a seamless grid of images消除图像无缝网格中的垂直/水平间隙
【发布时间】：2012-04-04 05:04:04
【问题描述】：

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

我有一个图像网格，它们都是正方形且大小相同。我通过添加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>

【问题讨论】：

标签： css grid whitespace vertical-alignment alignment

【解决方案1】：

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

#photos li img { width: 102% }

例如：

【讨论】：

【解决方案2】：

删除宽度 columns.css 第 101 行

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

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

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

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

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

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

【讨论】：