отступы текста также отступы <img>?

Question

Я пытаюсь использовать CSS для замены изображения в html, поэтому

<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;
}

Но, похоже, это не дает никакого эффекта, любая идея почему ??

-edit-

я использовал эту технику, чтобы заменить текст для img, но никогда не пытался заменить img для другого img

Answer 1

text-indent работает только со встроенными элементами в потоке, поэтому, если бы вы использовали его для строки со встроенным элементом (или любыми другими встроенными или встроенными блочными элементами), он работал бы.

Однако вы можете заменить изображение другим изображением, используя CSS, если вы знаете размеры нового изображения, используя следующий 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;
}

А вот вам jsfiddle: http://jsfiddle.net/kizu/kNAgT/4/

Answer 2

Нет, это не так ... потому что изображение не содержит текста для отступа.

Однако вы можете добиться нужного эффекта, поместив изображение в другой элемент, например p илиdiv.

Итак

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

Пример: http://jsfiddle.net/jasongennaro/v7GyN/