How can I move the position of an image that's inline with some text?

I have the following:

<li><a class='disabled' ><img src='../../Content/Ico开发者_运维问答ns/home.png' />Home</a></li>

My li height is 25px and my img is 16x16. What I would like to do is to make the image line up with the text and also have a small space between the image and text. I tried the following:

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

The image moves down but the text moves down as well.

Is there a way I could just add padding or margin to the image without the text moving?

Please note that I already use set (and change) the background color so I need to use the img tag.

You can use:

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

That will move only the img down 6px from where it would have been.

something like this? 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;
 }

You can also give the

a{
  float:left;
}