Question

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 {
    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 */
}

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.

Answer 1

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.:

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

Here’s a fiddle demonstrating the behavior