CSS: Moving text down a few pixels, but saving the background yet?

Question

I have some CSS buttons that are bigger when they freeze. I also added that the text is larger, but I would like to move the text a few pixels without using a background image.

help?

my code is as follows:

<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

Use the CSS line-height property.

Answer 2

If you want to move the text down, use padding-top.

Answer 3

Use the following style for reference:

 #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 :hover and :visited specify only what you want to change ( background , font-size , etc.).

 #nav a:hover { background: #f000f0 url(Images/Button%20Hover.png); } 

Your code links have a different size:
a - height:28px; width:130px; height:28px; width:130px; ,
a:hover height:34px; width:140px; height:34px; width:140px; ,
a:visited - height:34px; width:140px; height:34px; width:140px; ),

That's why you get a different size, position (in a you use margin:auto - 0px), but for the marker a:hover matters, so your link also changes position.

Answer 4

line-height may work depending on your situation.

A problem with line height can be if you have a background color and then it will also expand.

For something that I did, I insert 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