Кнопка HTML / CSS

Question

.classname {
background-image:url(../../images/classname.png);
background-color:transparent;
background-repeat:no-repeat;
text-align:center;
border:none;
height:50px;
width:160px;
font-size:12px;
font-family:Tahoma, Geneva, sans-serif;
color:#CCC;
}

<div class="classname">Text</div> 

Почему текст выше изображения? Что я должен добавить, чтобы сделать его нормальным? Я могу использовать padding-top, но тогда внизу изображения тоже будет место, если вы понимаете, о чем я. Спасибо.

Answer 1

Я создал это для вас , я думаю вот как вы хотите это сделать.

Answer 2

Поскольку изображение представляет собой фон для текста.

Если вы пытаетесь создать кнопку изображения с отступлением текста, выполните <img src="someurl" alt="sometext" />

ЧтоВы имеете в виду выше?