CSS: Перемещение текста на несколько пикселей, но сохранение фона еще?

Question

У меня есть некоторые кнопки CSS, которые больше, когда они зависают. Я также сделал текст более крупным, но я хотел бы переместить текст на несколько пикселей без использования фонового изображения.

help?

мой код выглядит следующим образом:

<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

Если вы хотите, чтобы переместить текст вниз, используйте обивка-топ.

Answer 2

Используйте свойство CSS line-height.

Answer 3

Используйте следующий стиль для ссылки:

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

В :hover и :visited определяют только то, что вы хотите изменить (background, font-size и т.д.).

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

В своем коде ссылки имеют различный размер:
a - height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited - height:34px; width:140px;),

Вот почему вы получаете различный размер, положение (в a использовании margin:auto - 0px), но для a:hover маржа имеет изменения, поэтому ваша ссылка также меняет позицию.

Answer 4

line-высота может работать в зависимости от вашей ситуации.

Проблема с высотой строки может быть, если у вас есть цвет фона, а затем он также будет расширяться.

Для чего я делаю, я гнездятся некоторые divs

Я использовал position:relative; top:20px;

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

Этот встроенный стиль ТОЛЬКО ВРЕМЕННЫЕ