Search code examples
cssimagelistposition

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/Icons/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.

Solution

  • 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.