CSS Sprits, Add Padding to Background Image

Question

i'm new to css sprits. i have added a small red color arrow like image to all links in a DIV ID. it looks like this.(image attached)

how to get some padding after the background image ? i mean some space between image and text using CSS.

CSS

#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
height: 12px;
display:inline;
}

HTML

<div id="maincontent">
<a href="results/2013/31r09sup.php">Btech III</a>
</div>

i tried adding to css padding right, but it is giving some space after text not after image.

Answer 1

You want to use padding on your link, this will leave the background where it is but move the text, try padding-left: 25px;. But adding padding will add to the width so you will want to adjust the width of your link and reduce it by the amount of padding you have added (maybe not in this example)

Also your example image isn't loading

Try this:

#maincontent a:link {
background: url(images/css-images.png) no-repeat top left;
background-position: 0 0;
width: 4px;
padding-left: 25px;
height: 12px;
display:inline;
}

Answer 2

just apply a padding-left or a text-indent to your link