Is there a recommended amount of spacing between CSS sprites?
css, css-sprites, image
Solution
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.
Problem
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?