Is there a recommended amount of spacing between CSS sprites?

Question

Usually if I create CSS sprites, I line them all up next to each other with no spacing at all. For example if all the images are 10x10 pixels I would put them at the coordinates 0,10; 0,20; 10,10; 10,20.

But this seems to cause problems in certain circumstances. For example during page zooming and on mobile you can see the edge of the next sprite along.

Why does this problem occur, is it to do with rounding errors? Is simply adding spacing around the sprites the best way to avoid the problem? If so, is there a minimum or recommended amount of spacing we should have between the icons in the sprite image?

I think this would be wholly dependent on your layout, however in general, no spacing is preferred. — j08691, Oct 17 '12 at 16:11
Hmm, why the close votes? How is this question not constructive? — DisgruntledGoat, Oct 18 '12 at 00:37

Christoph · Accepted Answer · 2015-12-11T17:45:20.810

4

Sprite Bleeding may occur on zoom due to rounding, especially in IE (the old versions simply round to the nearest integer, e.G. a calculated value of 20.343px would be rendered as 20px).
Since the rounding error is never bigger than 1px, with a padding of 1px on all sides you can already fix that problem.

Modern browsers use a method called sub pixel rendering to mitigate this problem.

edited Dec 11 '15 at 17:45

answered Oct 17 '12 at 16:12

Christoph

50,121
21
99
128

Do you have some examples or data to backup your 1px claim, or is that just speculation? – j08691 Oct 17 '12 at 16:24
Neither nor, it's an empiric value that worked well for me for quite a long time now. But I found [this pretty old question](http://stackoverflow.com/questions/646901/do-i-still-need-to-pad-images-in-a-css-sprite) for you, stating pretty much the same;) – Christoph Oct 17 '12 at 17:47

score 0 · Answer 2 · answered Jan 01 '13 at 07:10

It would be easier to maintain CSS sprites stored in 50px x 50px or 100px x 100px boxes.

It helps in organizing related images in sprite.
You can copy paste a previous style and change just one digit for new style.
You would not need to manually find out the perfect pixel position manually.
It would also avoid the problematic cases where sometimes, you are not able to control the width/height of an html element and it shows the other unintended portions of the sprite image.

eg:

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 */
}

The problem here is that you now have an image twice as big as it needs to be. — DisgruntledGoat, Jan 01 '13 at 13:58
The file size difference is negligible (due to png compression) but maintenance becomes much more easier — webextensions.org, Jan 01 '13 at 14:17
@Above For non trivial websites, the file size difference is negligible but the amount of device (let's not forget we are in the mobile era) memory used grows by the square of the picture size. Therefore if you deploy true color PNGs you are better to not add too much room between the sprites. — Dario Fumagalli, Dec 11 '14 at 11:58

Is there a recommended amount of spacing between CSS sprites?

2 Answers2