padding not shifting my logo

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.

padding adds space inside the element, not on the outside. use margin — Ryan, Jun 16 '12 at 03:10
See this: [How to shift a background image with css?](http://stackoverflow.com/questions/1175557/how-to-shift-a-background-image-with-css) — mawburn, Jun 16 '12 at 03:14

canon · Accepted Answer · 2012-06-16T03:21:28.240

0

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

edited Jun 16 '12 at 03:21

answered Jun 16 '12 at 03:09

canon

40,609
10
73
97

score 0 · Answer 2 · edited Jul 15 '12 at 23:36

0

Try using the margin property as so

 margin-top:20px

edited Jul 15 '12 at 23:36

Wouter Dorgelo

11,770
11
62
80

answered Jun 16 '12 at 03:10

Nir

356
1
5

padding not shifting my logo

2 Answers2