CSS雪碧图中推荐的间距是多少？

Question

通常情况下，如果我创建 CSS 精灵图，我把它们都排成一排，不留任何间隙。例如，如果所有的图片都是 10x10 像素，那么我会把它们放在坐标为 0,10; 0,20; 10,10; 10,20 的位置上。

但是，在某些情况下，这似乎会导致问题。例如，在页面缩放和移动设备上，您可以看到旁边的精灵图的边缘。

为什么会出现这个问题？与舍入误差有关吗？是否简单地在精灵图周围添加间隙是避免这个问题的最佳方法？如果是这样，那么我们在精灵图中的图标之间应该保留多少最小或建议间隙呢？

- DisgruntledGoat

---

我认为这完全取决于你的布局，但一般来说，不留空格是更好的选择。 - j08691

嗯，为什么有关闭投票？这个问题怎么不具有建设性了？ - DisgruntledGoat

Answer 1

由于舍入，特别是在IE中（旧版本只是将其舍入到最近的整数，例如，计算出的值为20.343px将呈现为20px），放大时可能会出现精灵图出血的情况。

由于舍入误差从未超过1px，因此在所有边缘上添加1px的填充可以解决这个问题。

现代浏览器使用一种叫做次像素渲染的方法来缓解这个问题。

- Christoph

---

你有一些例子或数据来支持你的1像素主张吗，还是只是猜测？ - j08691

既不是这个也不是那个，这是一个经验值，我已经用了很长时间了。但是我为您找到了这个相当古老的问题，它基本上说的是一样的。 - Christoph

Answer 2

将 CSS 精灵存储在 50px × 50px 或 100px × 100px 的框中会更容易维护。

• 它有助于组织相关图像精灵。
• 您可以复制粘贴以前的样式，并更改一个数字以获得新样式。
• 您无需手动查找完美的像素位置。
• 这也将避免出现问题的情况，即有时您无法控制 html 元素的宽度/高度，并显示精灵图像的其他意外部分。

例如：

div.test {
    background-image: url(image.png);
    background-position: 100px 0px;
}
div.test:hover {
    background-position: 100px 100px; /* Simple relation with previous style */
}

div.box1 {
    background-image: url(image.png);
    background-position: 200px 0px;
}
div.box2 {
    background-image: url(image.png);
    background-position: 300px 0px; /* No efforts required to find out perfect pixel position */
}

- webextensions.org

---

问题在于，现在你有一个比实际需要大两倍的图像。 - DisgruntledGoat

文件大小的差异微不足道（由于png压缩），但维护变得更加容易。 - webextensions.org

对于非平凡的网站来说，文件大小的差异可以忽略不计，但是设备数量（别忘了我们已经进入移动时代）所使用的内存随图片大小的平方增长。因此，如果您使用真彩色PNG格式，最好不要在精灵图之间添加太多空间。 - Dario Fumagalli