Где находится дополнительное пространство из этих изображений?

Question

У меня проблема, что я реплицируюсь в разных браузерах.

У меня есть divs с изображениями каждый в обертке http://jsfiddle.net/QnVYL/. Обертка имеет границу 1px и дополнение 5px. Изображение внутри размером до 100%.

По какой-то причине между нижней частью изображения и нижней частью его обложки существует более 5 пикселей. Посмотрите, как заполнение выглядит равным со всех сторон изображений? Кажется, есть 3 пикселя из ... где-то. Firebug не дает мне знать, откуда.

Как я могу избавиться от пространства? Я не могу использовать абсолютное позиционирование для подделки отступов, потому что я еще не уверен, что всегда буду знать точную высоту изображения.

Помощь очень ценится!

Answer 1

Это известная проблема. Попытка:

img { 
    display: block; 
}  

Answer 2

Никакого дополнительного разнос, если добавить img {display:block}

http://jsfiddle.net/lexy0202/uxMu9/2

Answer 3

Как я догадался, что это отображение attribut:

#container { 
    display:block; 
    width: 50%; 
    margin: auto; 
    margin-top: 100px; 
} 

Answer 4

Это линия высотой. Изображения отображаются как элементы встроенного блока по умолчанию. Высота строки гарантирует, что следующий текст не прилипает к изображению, как здесь:

<img...><br>foo 

Оба эти исправления полезны, в зависимости от ситуации:

.imgContainer { line-height: 0; } 

img { display: block; }