내 로고가 바뀌지 않는 패딩

배경 이미지 (CSS 스프라이트)를 사용하는 로고 링크가 있습니다. 모든 것은 정상적으로 작동하지만 링크 상단에 20px 패딩을 추가하면 (사용자가 링크를 클릭하기위한 공간을 늘리기 위해) 배경 이미지가 아래로 이동하지 않습니다.내 로고가 바뀌지 않는 패딩

a { 
    background-image:url("sprite.png"); 
    background-repeat:no-repeat; 
    display:block; 
    height:70px; 
    width:70px; 
    padding-top:20px; /* give top of the link more click space */ 
}

그리고 내 HTML :

<a href="#" style="background-position:0 0;"></a>

내가 잘못 뭐하는 거지 여기 내 CSS는 무엇입니까?
편집 : 여러분들은 원래 목표를 놓치고 있다고 생각합니다. 내 목표는 로고 링크가 더 많은 클릭 공간을 제공하는 것입니다. 여백을 사용하면 요소 링크가 아래로 밀려 나고 원래 원하는 것처럼 클릭 공간이 늘어나지 않습니다.

출처

2012-06-16 paul smith

패딩은 외부가 아닌 요소 내부에 공간을 추가합니다. 여백을 사용하십시오 –

보기 : [css로 배경 이미지를 이동하는 방법?] (http://stackoverflow.com/questions/1175557/how-to-shift-a-background-image-with-css) – mawburn

패딩은 배경 이미지에 영향을 미치지 않습니다. Y 오프셋 같은 양만큼 배경, 즉, 링크의 히트 영역에 영향을주는 패딩을 추가 한 다음 변경하려면 여기

a 
{ 
    padding-top: 10px; 
    background-position: 0px 10px; 
}

을 fiddle는 동작

출처

2012-06-16 03:09:46 canon

여백 속성과를 사용해보십시오을 보여주는 것 그래서

출처

2012-06-16 03:10:39 Nir

내 로고가 바뀌지 않는 패딩

답변

관련 문제