CSS: Di chuyển văn bản xuống một vài pixel nhưng vẫn giữ nền?

Question

Tôi có một số nút CSS lớn hơn khi di chuột qua. Tôi cũng đã làm cho văn bản lớn hơn tuy nhiên tôi muốn di chuyển văn bản xuống một vài px mà không rối tung với hình nền được sử dụng.

trợ giúp?

mã của tôi trông như thế này:

<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

Nếu bạn muốn di chuyển văn bản xuống, sử dụng padding-top.

Answer 2

Sử dụng thuộc tính CSS line-height.

Answer 3

Sử dụng các phong cách sau đây cho 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; 
} 

Trong :hover và :visited xác định những gì bạn muốn thay đổi (background, font-size, vv).

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

Trong liên kết mã của bạn có kích thước khác nhau:
a-height:28px; width:130px;,
a:hoverheight:34px; width:140px;,
a:visited-height:34px; width:140px;),

Đó là lý do tại sao bạn nhận được kích thước khác nhau, vị trí (trong a bạn sử dụng margin:auto - 0px), nhưng đối với số tiền a:hover đã thay đổi, do đó liên kết của bạn cũng thay đổi vị trí.

Answer 4

chiều cao dòng có thể hoạt động tùy thuộc vào tình huống của bạn.

Vấn đề với chiều cao dòng có thể là nếu bạn có màu nền và sau đó nó cũng sẽ mở rộng.

Đối với một cái gì đó tôi đã làm, tôi đang làm tổ một số divs

tôi đã sử dụng position:relative; top:20px;

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

inline style này chỉ là tạm thời