CSS: Bewegen Sie den Text ein paar Pixel nach unten, aber den Hintergrund noch halten?

Question

Ich habe einige CSS-Buttons, die größer sind, wenn sie über den Cursor gezogen werden. Ich habe den Text auch größer gemacht, aber ich möchte den Text um ein paar Pixel nach unten verschieben, ohne das verwendete Hintergrundbild zu stören.

Hilfe?

mein Code sieht wie folgt aus:

<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

Wenn Sie den Text nach unten verschieben möchten, padding-top verwenden.

Answer 2

Verwenden Sie die CSS-Eigenschaft line-height.

Answer 3

die folgende Art für 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 :hover und :visited definieren nur das, was Sie ändern möchten (background, font-size, etc.).

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

In Ihrem Code Links haben unterschiedliche Größe:
a-height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited-height:34px; width:140px;),

Deshalb sollten Sie unterschiedliche Größe bekommen, Position (in a Sie verwenden margin:auto - 0px), aber für a:hover Marge hat sich geändert, so dass Ihr Link auch die Position ändern.

Answer 4

Zeilenhöhe kann abhängig von Ihrer Situation arbeiten.

Problem mit Zeilenhöhe kann sein, wenn Sie eine Hintergrundfarbe haben und dann wird es auch erweitern.

Für etwas, was ich tat, ich bin nisten einige divs

I verwendet position:relative; top:20px;

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

Diese Inline-Stil ist nur vorübergehend