CSS: ¿mueve el texto algunos píxeles pero mantiene el fondo fijo?

Question

Tengo algunos botones CSS que son más grandes cuando se pasan por encima. También he hecho que el texto sea más grande, pero me gustaría mover el texto unos pocos px sin interferir con la imagen de fondo que se está utilizando.

ayuda?

mi código es el siguiente:

<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

Si desea mover el texto hacia abajo, utilice padding-top.

Answer 2

Utilice la propiedad CSS line-height.

Answer 3

utilizar el siguiente estilo para el enlace:

#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; 
} 

En :hover y :visited definir sólo lo que desea cambiar (background, font-size, etc.).

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

En sus enlaces de código tienen diferente tamaño:
a - height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited - height:34px; width:140px;),

Es por eso que conseguir de diferentes tamaños, posición (en a utiliza margin:auto - 0px), pero para a:hover el margen ha cambiado, por lo que su enlace también cambia de posición.

Answer 4

línea de altura puede funcionar dependiendo de su situación.

Problema con la altura de la línea puede ser si tiene un color de fondo y luego también se expandirá.

Para algo que estaba haciendo, estoy anidación algunos divs

Solía ​​position:relative; top:20px;

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

Este estilo en línea es sólo temporal