div/span and sprites - css

Question

I am replacing most inline images on my sites with a sprite.
The sprite class would contain some basic css:
.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}
I saw that nesting div inside of an anchor tag is not a good idea.
<a><div class="sprite"></div></a>
I've tried to add sprites to span elements instead.
<a><span class="sprite"></span></a>
But the span elements do not expand to the width and height that I set.
It would be really useful to be able to use span elements to replace image tags with a sprite.
I could add a blank gif image into the span element to expand it. But that would defeat the reason why I want to use sprites (to reduce the number of http requests).
Using div elements inside an anchor tag is not correct.
So how can I use sprites inside an anchor element?
And there also is always the problem of aligning the div. If an image is centered in another element, how do I replace it with a sprite?

Answer 1

You need to declare display: block; on your span elements which are by default inline elements. Something like:
.sprite{
display: block;
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
}
That should make the span elements expand to your desired width/height.
Hope this helps !

Answer 2

You can set the display property of the span element to inline-block
.sprite{
background-image:url(...);
background-position:...;
width: 16px;
height:16px;
display: inline-block;
}
This way the span element with the class of .sprite will accept width and height properties and will also act like inline elements.