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 thin

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.