¿De dónde viene el espacio extra en estas imágenes?

Question

Tengo un problema que he replicado en varios navegadores.

Tengo divs con imágenes cada uno en un contenedor http://jsfiddle.net/QnVYL/. El contenedor tiene un borde de 1px y un relleno de 5px. La imagen interior tiene un ancho de 100%.

Por alguna razón, sin embargo, hay más de 5 píxeles entre la parte inferior de la imagen y la parte inferior de su envoltura. ¿Ve cómo el relleno parece ser igual en todos los lados de las imágenes? Parece que hay 3 píxeles agregados de ... en alguna parte. Firebug no me deja saber de dónde.

¿Cómo puedo deshacerme del espacio? No puedo usar el posicionamiento absoluto para falsificar el relleno porque aún no estoy seguro de que siempre sabré la altura exacta de la imagen.

Ayuda es muy apreciada!

Answer 1

Es un problema conocido. Pruebe:

img { 
    display: block; 
}  

Answer 2

sin espacio extra si se agrega img {display:block}

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

Answer 3

Como supuse que es el attribut pantalla:

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

Answer 4

Es una línea de altura. Las imágenes se representan como elementos de bloque en línea de forma predeterminada. El line-height se asegura de que, tras el texto no se pega a la imagen como aquí:

<img...><br>foo 

Ambas estas correcciones son útiles, dependiendo de la situación:

.imgContainer { line-height: 0; } 

img { display: block; }