Question

我有一个使用背景图片（css精灵）的徽标链接。一切正常，但是当我尝试在链接顶部添加20px填充时（为了给用户提供更多空间来点击链接），背景图像不会向下移动。这是我的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 */
}

我的HTML：

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

我究竟做错了什么？
编辑：我想你们都错过了最初的目标。我的目标是为徽标链接提供更多点击空间。如果我使用margin，则会按下元素链接，这不会像我原来想要的那样提供更多的点击空间。

Answer 1

填充不会影响背景图像。要影响链接的命中区域，请添加填充，然后将背景y偏移更改相同的数量，即：

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

这是展示行为的fiddle

Answer 2

尝试使用margin属性

 margin-top:20px

填充没有移动我的标志

2 个答案: