CSS Sprites，为背景图像添加填充

Question

我是css sprits的新手。我已经为DIV ID中的所有链接添加了小红色箭头，如图像。看起来像这样。（附图片）

如何在背景图片后获得一些填充？我的意思是使用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>

我尝试添加到css 右边填充，但它在文字之后没有图片之后给予一些空间。

Answer 1

您希望在链接上使用填充，这会使背景保持原样但移动文本，请尝试padding-left: 25px;。但添加填充将增加宽度，因此您需要调整链接的宽度并减少添加的填充量（可能不在此示例中）

此外，您的示例图片未加载

试试这个：

#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

只需将padding-left或text-indent应用于您的链接

即可