Do I still need to pad images in a CSS Sprite ?

Question

In CSS Sprites you will often find padding between each image. I believe the idea is so that if the page is resized then one image won't bleed into another.

I think this depends on the different types of browser zoom (best explained by Jeff).

However, I haven't been able to see this behaviour in my tests. Is this only a problem with older browsers? (I havent been able to test with IE6 at the current time so I'm counting that as 'old').

Should I still worry about leaving space? Its kind of a pain.

For instance :

A CSS Sprite I found for AOL has padding between each image : VIEW

but The Daily Show decided not to bother : VIEW

Answer 1

Speaking of the older browsers (those using text zoom), you don't always need padding.

The main difference between your two examples is that the Daily Show sprite already includes the menu item's text in the image itself.

When using text zoom, the AOL menu items could stretch out vertically due to the larger font size, and the menu text might even wrap to two lines. To accommodate for such eventualities, those icons need a little padding to ensure they don't bleed. Typically, you'd just try to make sure it doesn't bleed on any of IE6's five text sizes.

Since The Daily Show's menu doesn't contain any (visible) HTML text its size won't be affected by text zoom (though you might need a line-height: 0; or so to be sure), so it doesn't need any padding.

As scunliffe already showed, browsers using page zoom may need sprites to have a little padding due to rounding errors.