Question

我现在被卡住了，试图在我的锚标签周围添加空间。当我添加填充时，它只会使宽度变大，背景图像保持不变。

我正在尝试做的是当我向主锚标签添加填充时，主页图像会移动。

HTML：

<ul id="navbar">
    <li><a id="homebutton" href=""><span>Home</span></a>
    </li>
    <li><a href="">Services</a>
    </li>
    <li><a href="">Resources</a>
    </li>
    <li><a href="">News</a>
    </li>
    <li><a href="">Clients</a>
    </li>
    <li><a href="">Association</a>
    </li>
    <li><a href="">Contact Us</a>
    </li>
</ul>

Answer 1

尝试使用background-position定位背景图片。

示例：

#homebutton {
background-position: center top;
}

第一个值是x坐标，第二个是y坐标您可以使用px，em或百分比。

<强> 编辑：

Updated fiddle

Answer 2

尝试提供margin: 20px并尝试

这里是小提琴fiddle

这样做的主要原因是填充会在控件边界与其内容之间产生间隙，而边距会与父容器产生距离

当你应用填充时，控件大小保持不变，因此背景实际上完全适合。添加图像标记和源或使用边距

Answer 3

您可以在锚点内添加图像。

<a href="blah">
    <img src="blah"/>
    <span>Home</span>
</a>

http://jsfiddle.net/mwJUY/5/

CSS - 向Anchor添加填充不是移动图像

3 个答案: