CSS - 앵커에 패딩을 추가하면 이미지가 움직이지 않습니다.

Question

지금 당장 멈춰서 앵커 태그 주위에 공간을 추가하려고합니다. 패딩을 추가하면 너비가 커지고 배경 이미지는 그대로 유지됩니다.

홈 앵커 태그에 패딩을 추가하면 홈 이미지가 움직이게됩니다.

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

HTML : background-position를 사용하여 배경 이미지를 위치

<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

보십시오.

예 :

#homebutton { 
background-position: center top; 
} 

첫 번째 값은 X 좌표 둘째는 y 좌표이다.
px, em 또는 percent를 사용할 수 있습니다.

는 편집 :

Updated fiddle

Answer 2

이 margin: 20px를주는 시도하고 여기에 대한 주요 이유는 그 패딩이 fiddle

바이올린이야

시도는 컨트롤 사이의 간격을 만듭니다 경계선과 그 내용은 마진과 동등한 거리를 만듭니다 콘테이너

패딩을 적용하면 컨트롤 크기가 동일하게 유지되므로 배경이 실제로 완전히 맞습니다. 이미지 태그와 소스 또는 여백을 추가하십시오.

Answer 3

이미지를 앵커 안에 추가 할 수 있습니다.

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

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