Как я могу перемещать позицию изображения, которое встроено в некоторый текст?

У меня есть следующее:

<li><a class='disabled' ><img src='../../Content/Icons/home.png' />Home</a></li>

Моя ли высота 25 пикселей, а мой img - 16x16. То, что я хотел бы сделать, - сделать изображение строкой с текстом, а также иметь небольшое пространство между изображением и текстом. Я попробовал следующее:

img { padding-top: 6px; margin-right: 4px; }

Изображение перемещается вниз, но текст также перемещается вниз.

Есть ли способ, который я мог бы добавить в изображение без полей или полей?

Обратите внимание, что я уже использую set (и изменяю) цвет фона, поэтому мне нужно использовать тег img.

Ответ 1

Вы можете использовать:

img {
    margin-right: 4px;
    position: relative;
    top: 6px
}

Это будет перемещать только img вниз 6px, где бы это было.

Ответ 2

что-то вроде этого? HTML:

<li class="menu"><a class='disabled' >Home</a></li>

CSS

li.menu { 
  background-image: url(../../Content/Icons/home.png) left 6px;
  padding-left: 20px;
  margin-right: 4px;
 }

Ответ 3

Вы также можете указать

или

a{
  float:left;
}

(wiil не учитывает надоедливый 6px из изображения - упомянут тридцать)