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

Question

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

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

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

или

a{
  float:left;
}

(не принимая во внимание надоедливые 6px с картинки - упомянуто тридцать)

Answer 3

как то так?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;
 }