CSS:将文本向下移动几个像素但仍然保持背景？

Question

我有一些CSS按钮在悬停时更大.我还将文本设置得更大但是我想将文本向下移动几个px而不会弄乱使用的背景图像.

救命？

我的代码看起来像这样:

<div id="nav">
    <a href="index.php">Home</a>
    <a id="headrush">Beer Bongs</a>
    <a id="thabto">Novelty</a>
</div>

#nav a {
    background: url(Images/Button.png);
    height: 28px;
    width: 130px;
    font-family: "Book Antiqua";
    font-size: 12px;
    text-align: center;
    vertical-align: bottom;
    color: #C60;
    text-decoration: none;
    background-position: center;
    margin: auto;
    display: block;
    position: relative;
}

#nav a:hover {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 16px;
    text-align: center;
    color: #C60;
    text-decoration: none;
    margin: -3px;
    z-index: 2;
}

#nav a:active {
    background: url(Images/Button%20Hover.png);
    height: 34px;
    width: 140px;
    font-family: "Book Antiqua";
    font-size: 14px;
    text-align: center;
    color: #862902;
    text-decoration: none;
    margin: 0 -3px;
    z-index: 2;
}

Answer 1

使用line-heightCSS属性.

Answer 2

行高可以根据您的情况起作用。

如果您有背景颜色，则行高可能会出现问题，然后它也会扩展。

对于我正在做的事情，我正在嵌套一些divs

我用了 position:relative; top:20px;

<div class="col-lg-11">
   <div style="position:relative; top:20px;">CR</div>     
</div>

这种内联样式只是暂时的

Answer 3

如果要将文本向下移动，请使用 padding-top。