CSS: de tekst een paar pixels naar beneden verplaatsen maar de achtergrond stil houden?

Ik heb enkele CSS-knoppen die groter zijn als ze met de muisaanwijzer erop worden geplaatst. Ik heb de tekst ook groter gemaakt, maar ik zou de tekst een paar px naar beneden willen verplaatsen zonder te knoeien met de gebruikte achtergrondafbeelding.

hulp?

mijn code ziet er als volgt uit:

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

Antwoord 1, autoriteit 100%

Gebruik de CSS-eigenschap line-height.

Antwoord 2, autoriteit 21%

Gebruik de volgende stijl voor 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 :hoveren :visiteddefinieer je alleen wat je wilt veranderen (background, font-size, enz.).

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

In uw code hebben links een verschillende grootte:
a– height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited– height:34px; width:140px;),

Daarom krijg je een andere grootte, positie (in agebruik je margin:auto– 0px), maar voor a:hovermarge heeft verandering, dus uw link verandert ook van positie.

Antwoord 3, autoriteit 11%

Als je de tekst naar beneden wilt verplaatsen, gebruik je padding-top.

Antwoord 4, autoriteit 11%

line-height kan werken, afhankelijk van uw situatie.

Probleem met lijnhoogte kan zijn als je een achtergrondkleur hebt en dan wordt deze ook groter.

Voor iets wat ik aan het doen was, ben ik wat divs

aan het nesten

Ik gebruikte position:relative; top:20px;

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

Deze inline-stijl is ALLEEN TIJDELIJK

Antwoord 5

Vertical align does the trick

.text-to-align {
    vertical-align: bottom;
}