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/