CSS - 向锚点添加填充不是移动图像

Question

我现在被卡住了，试图在我的锚点标记周围添加空格。当我添加填充时，它只是使宽度变大，并且背景图像保持原位。

我想要做的就是当我添加填充到主锚标记时，主图像移动。

的jsfiddle：http://jsfiddle.net/mwJUY/

HTML：

<ul id="navbar"> 
    <li><a id="homebutton" href=""><span>Home</span></a> 
    </li> 
    <li><a href="">Services</a> 
    </li> 
    <li><a href="">Resources</a> 
    </li> 
    <li><a href="">News</a> 
    </li> 
    <li><a href="">Clients</a> 
    </li> 
    <li><a href="">Association</a> 
    </li> 
    <li><a href="">Contact Us</a> 
    </li> 
</ul> 

Answer 1

尝试使用background-position来定位你的背景图像。

实施例：

#homebutton { 
background-position: center top; 
} 

第一个值是x坐标，第二个是y坐标。
您可以使用px，em或百分比。

编辑：

Updated fiddle

Answer 2

尝试给margin: 20px，并尝试

这里的小提琴fiddle

造成这种情况的主要原因是，填充创建控制之间的间隙边界和它的内容，而边距创造了距离平面的距离ent容器

当您应用填充控制大小保持不变，所以背景实际上完全适合。或者添加图片标签和来源或使用保证金

Answer 3

您可以将图像添加到定位点中。

<a href="blah"> 
    <img src="blah"/> 
    <span>Home</span> 
</a> 

http://jsfiddle.net/mwJUY/5/