extraño problema de relleno alrededor de la imagen

Question

Tengo un problema extraño. Quiero poner borde alrededor de la imagen, pero muestra algo de espacio en la parte inferior. Por favor, eche un vistazo aquí: http://jsfiddle.net/4WKJY/ No quiero poner alto y ancho fijo. Gracias por cualquier ayuda.

Answer 1

Puede solucionarlo haciendo la img display:block en su CSS, as seen here.

Answer 2

Por otra parte, aplicar el CSS sólo para imágenes:

.thumb img{ 
position: relative; 
padding:2px; 
float: left; 
margin: 0px 0px 5px 5px; 
border: solid 1px #ccc; 
} 

Answer 3

Al contrario de la otra respuesta, no tiene nada que ver con el espacio en blanco en el marcado, y eliminar el espacio en blanco no va a solucionar este problema.

El problema es que las imágenes están en línea por defecto y el valor inicial para la alineación vertical es baseline. Esto significa que la imagen se trata como si fuera cualquier otro componente textual de la página, y el espacio está reservado debajo del contenido textual para los descensores: las colas en letras como 'minúsculas', etc.

Para arreglar esto, usted necesita decirle al motor de renderizado que la imagen no debe tratarse como contenido textual - .thumb img { display: block; } hará esto - o puede decirle al motor de renderizado que no reserve espacio para los descensores, y alinee el contenido al fondo - .thumb img { vertical-align: bottom; } hará esta.

Editar: Me parece recordar que las versiones antiguas de Internet Explorer manejan incorrectamente espacios en blanco, por lo que quitar el espacio en blanco puede tener un efecto allí, pero lo que dije arriba sigue en pie; quitar el espacio en blanco no es una solución de navegador cruzado para este problema.