padding not shifting my logo

I have a logo link that's using a background-image (css sprite). All works fine, but when I try to add a 20px padding to the top of the link (to give it more space for user to click the link), the background image is not moving down. Here is my css:

a {
    padding-top:20px; /* give top of the link more click space */

And my html:

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

What am I doing wrong? Edit: I think you guys are missing the original goal. My goal is to give the logo link more clicking space. If I use margin then the element link is pushed down, which does not give more clicking space like I originally wanted.


Padding won't affect the background-image. To affect the hit-area of the link, add padding and then change the background y-offset by the same amount, i.e.:

    padding-top: 10px;
    background-position: 0px 10px;

Here's a fiddle demonstrating the behavior

Try using the margin property as so


Need Your Help