does text-indent also indents <img>?

Question

i'm trying to use CSS to replace the image in html, so

<img class="flechaTooltip" src="oldpath" />

turns into

    .flechaTooltip {
    width: 0;
    height: 0;
    padding: 11px 209px 0 0; /* New image's dimensions here */
    background: url(../../nImg/flechaTooltipGris.gif) no-repeat;
    /* Removing image from older Opera */
    content: "";
    display: inline-block;
}

But it doesn't seem to make any effect, any idea why??

-edit-

i have used this technique to replace text for an img, but never tried to replace img for another img

Answer 1

The text-indent only works on inline elements in the flow, so if you'd use it for a line with inline element (or any other inline or inline-block elements) it would work.

However, you can replace an image with another image using CSS if you know the new image's dimensions using the following CSS:

.flechaTooltip {
    width: 0;
    height: 0;
    padding: 50px 300px 0 0; /* New image's dimensions here */
    background: url(newpath);
    /* Removing image from older Opera */
    content: "";
    display: inline-block;
}

And here is a jsfiddle for you: http://jsfiddle.net/kizu/kNAgT/4/

Answer 2

No, it doesn't... because an image contains no text to indent.

However, you can achieve the affect you want by wrapping the image in another element, like a p or div.

So

<p class="flechaTooltip"><img src="oldpath" /></p>

Example: http://jsfiddle.net/jasongennaro/v7GyN/