Do CSS Sprite images have to have X amount of space between each item?

Question

I am having a problem, for a while I have been trying to figure out how to resolve this issue. I will describe it very well below...

I am trying to use an image as a sprite image for an UL list. It should show an icon with text next to it, both the icon and the text should link to somewhere.

My first example look how I want it to be. When the font-size is set to 10px it looks ok...

As soon as I change the font-size from 10px to 16px...

Here is the CSS and HTML

CSS

#post-meta-wrapper{
    list-style: none;
    margin:20px 0 20px 20px;
    width:400px;
}

#post-meta-wrapper li {
    width:100%;
    color: #44495B;
    border-top: 1px dotted #CCC;
    color: #999;
    font-size: 10px;
    line-height: 28px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    text-indent: 0px;
}
#post-meta-wrapper li a{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    padding-left:15px;
}

#post-meta-wrapper .meta-img {
    background:#fff;
    width: 15px;
    height: 10px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 8px;
    overflow: hidden;
}

#post-meta-wrapper a:hover,
#post-meta-wrapper .active{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -195px;
    width: 15px;
    height: 10px;
}

The HTML

<ul id="post-meta-wrapper">
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#" class="active"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
    <li class="author">
        <a href="#"><span class="meta-img">Test link</a>
    </li>
   
</ul>

JSFiddle Examples

This is the first one with the font-size: 10px http://jsfiddle.net/jasondavis/Mt87G/4/

This is the MESSED UP one with the font-size: 16px http://jsfiddle.net/jasondavis/Mt87G/5/

Help me?

Ok I know I could just change the sprite image to have huge spaces around each object in the image and then you wouldn't notice this problem, but I would really like to resolve this issue the right way. I mean is it possible to do what I am trying to do with just CSS or does the image need to be spaced out? I have seen other sprite images where they are together close like mine and I have seen some where everything is like 100px apart.

Please help me if you know how to resolve this, I have tried eveything I can think of without any luck yet. I need to do this on a mass scale so I would like to get it done correctly now before I do that. Thank you for any help

Answer 1

I would suggest using the :before pseudo element. Add the class to your anchor link or the list item and style the pseduo element to hold the sprite image. This gives the same effect as being able to set a specific size on a span, without the need of extra markup.

<li class="icon">
    <a href="#">Test Link<a/>
<li>

.icon:before{
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    /* other css for positioning */
}

If you want the icon to be part of the link, the before should to be on the anchor. It will be underlined if the anchor is underlined.

If you put it on the li, the link can still be underlined without the icon being underlined, but to make it clickable you need to work some magic with padding on the anchors.

Note: As mentioned by jimplode, this will not work in IE <= 7 So if you need it to work there (sad for you) better to use the extra markup.

Answer 2

1. Close the span
2. Set width, height, float and margin-top of this span to align with base of line height

Try this: http://jsfiddle.net/Mt87G/19/

CSS

#first a{
     font-size: 10px;
     padding-left: 5px;
     line-height: 12px;
}
#second a{
    font-size: 22px;
    line-height: 25px;
    padding-left: 5px; 
}
.meta-img{
    background: url(http://i.imgur.com/Bcps8.png) no-repeat 0px -183px;
    width: 13px;
    height: 12px;
    float: left;
}
#first .meta-img{
    margin-top: 4px
}
#second .meta-img{
    margin-top: 7px
}

HTML

<p id="first">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a>  
</p>    

<p id="second">
    <a href="#">
        <span class="meta-img"></span>Test link
    </a> 
</p>

Answer 3

I generally leave a few pixels in between sprites due to rounding errors that I've seen on mobile Safari. If there is just 1 pixel in between the sprites, sometimes there is a hair-width sliver of the next sprite over at the edge of the element. Adding a little more buffer room avoids this problem. If you are using PNG files, there isn't really much additional file size (extremely small increase) with more spacing due to the way they compress.

Answer 4

Well written question! I simplified your two sample fiddles into one fiddle:

http://jsfiddle.net/Mt87G/6/

It seems in the 16px-variant the image is just showing a bit more as the line-height becomes bigger because of the larger font size.

Edited: apparently SO uses sprites as well, see for example this image. If I use firebug to increase the line-height for the "vote-up" button for example, at some point the next sprite starts showing up.

So, if you would follow their lead, it seems you could:

• set a fixed height on your element
• leave some space between sprites, just to be sure

Strict answer though to your question then seems "no, not necessary".

Answer 5

I think you can give more spaces between the images. If you have individual images then you can use http://spritegen.website-performance.org/ to create sprite images and you can provide custom space between sprite images.

If you are changing the font-size dynamically then also you can use the sprite with more space and can only change the background-position.

Answer 6

As you have your background image on an anchor, you could always put a span inside the anchor for the image, this way you can control the width and height of the span which in turn will only show the portion of the image you want it to use.