Html CSS：将文本向下移动几个像素但保持背景静止？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10982465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Moving the text down a few pixels but keeping the background still?
提问by Aaron
I have some CSS buttons that are bigger when hovered over. I have also made the text bigger however I would like to move the text down a few px without messing with the background image being used.
我有一些 CSS 按钮在悬停时更大。我也使文本更大，但我想将文本向下移动几个像素，而不会弄乱正在使用的背景图像。
help?
帮助？
my code looks like this:
我的代码是这样的：
<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;
}
回答by webdevkit
Use the line-heightCSS property.
使用line-heightCSS 属性。
回答by Brian Warshaw
If you want to move the text down, use padding-top.
如果要向下移动文本，请使用 padding-top。
回答by miszczu
Use the following style for link:
使用以下样式链接：
#nav a:link {
background: #ff00ff 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;
display:block;
position:relative;
}
In :hoverand :visiteddefine only what you want to change (background, font-size, etc.).
在:hover与:visited只有你想改变什么（定义background，font-size等等）。
#nav a:hover {
background: #f000f0 url(Images/Button%20Hover.png);
}
In your code links have different size:a- height:28px; width:130px;,a:hoverheight:34px; width:140px;,a:visited- height:34px; width:140px;),
在你的代码链接有不同的大小：a- height:28px; width:130px;, a:hoverheight:34px; width:140px;, a:visited- height:34px; width:140px;),
That's why you getting different size, position (in ayou use margin:auto- 0px), but for a:hovermargin has change, so your link also change position.
这就是为什么你得到不同的大小、位置（在a你使用margin:auto- 0px），但是a:hover边距发生了变化，所以你的链接也会改变位置。
回答by Tom Stickel
line-height can work depending on your situation.
line-height 可以根据您的情况工作。
Problem with line-height can be if you have a background color and then it will also expand.
line-height 的问题可能是如果您有背景颜色，然后它也会扩展。
For something I was doing, I'm nesting some divs
对于我正在做的事情，我正在嵌套一些 divs
I used position:relative; top:20px;
我用了 position:relative; top:20px;
<div class="col-lg-11">
<div style="position:relative; top:20px;">CR</div>
</div>
This inline style is ONLY TEMPORARY
这种内联样式只是临时的
