Удалить пробел из изображения

Question

пожалуйста, взгляните на эту скрипку:

http://jsfiddle.net/cX47v/1

Я просто пытаюсь сохранить эффект, который вы видите, но я хочу удалить пустое пространство под изображением.Я знаю об display: block, но если я это сделаю, эффект наведения не будет работать.Есть идеи как это исправить?

Answer 1

Изменение HTML на то, что у меня есть ниже (добавление style="font-size:0") устраняет проблему в Chrome, Firefox, IE9 и Safari.Я уже сталкивался с этой проблемой, когда браузер воспринимает одну строку текста как некоторую дополнительную высоту, даже когда нет видимого текста.

<div class='fancy_image'>
    <div class='shadow' style='border:2px solid; float:left;padding:5px;margin:10px;'>
        <div style="font-size: 0;">    
            <img class='fade' src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width=300 height=200  />
        </div>
    </div>
</div>

Вы можете видеть эторабота здесь: http://jsfiddle.net/jfriend00/8FkmG/. Оставшееся пустое пространство вокруг изображения контролируется отступом в вашем HTML.

В целом, ваш HTML / CSS здесь действительно крут, смешивая float и позиционирование и делая позиционированиепяди.Очень странно.

Answer 2

Установите line-height:0; в вашем теневом делении.

Answer 3

просто меняет класс .fade css

.fade {font-size:0px;
    background: url('http://james.linnegar.com/demos/js/win7/hover.png');
}