HTML 5 extraño img siempre agrega 3px margen en la parte inferior

Cuando cambio mi sitio web a

 

Cada elemento img que está envuelto dentro de un DIV tiene un margen inferior de 3px, aunque ese margen no está definido en CSS. En otras palabras, no hay atributos de estilo que estén causando ese margen inferior de 3px.

 

Ahora digamos que haha.jpg es 50×50, y .placeholder está configurado para mostrar: table. Extrañamente, las dimensiones de altura de .placeholder en mi observación son 50×53 …

¿Alguien ha encontrado esta anomalía antes y la ha solucionado?

EDITAR

Aquí está la JS FIDDLE

http://jsfiddle.net/fRpK6/

Este problema se debe a que la imagen se comporta como un carácter de texto (y deja un espacio debajo de donde iría la parte colgante de una “y” o “g”), y se resuelve mediante el uso de la propiedad CSS de vertical-align para indican que no se necesita ese espacio. Casi cualquier valor de vertical-align servirá; Me gusta el middle , personalmente.

 img { vertical-align: middle; } 

jsFiddle: http://jsfiddle.net/fRpK6/1/

A menudo resuelvo esto dando la display:block elemento de imagen display:block o display:inline-block según corresponda.

está resuelto mi problema

 line-height: 0; 

Creo que estoy poniendo

 line-height: 1; 

en la imagen también solucionará este problema, especialmente si está en un bloque en sí mismo.

No estoy seguro de la explicación exacta de por qué sucede, pero proporcione su marcador de posición Div font-size: 0px;

 .placeholder { font-size: 0px; } 

aplicar display: block a la imagen corregirlo, tengo este problema con imágenes dentro de divs flotantes.

no estoy seguro de cuál es el problema exacto, pero lo he intentado con 2 opciones diferentes, primero aplicar clase en la etiqueta img; esto funcionará y, segundo, aplicar tamaño de fuente 0 px;

http://jsfiddle.net/fRpK6/3/

También ocurre con los divs acumulados, solo agrega la propiedad float . Ejemplo:

  
Some text
Some text
Some text

CSS problemático:

 .piledUpDiv{ width:100%; display:inline-block; } 

Solución:

 .piledUpDiv{ width:100%; display:inline-block; float:left; } 

tal vez es el problema del espacio en blanco lo que causa esto. entonces, los métodos abajo quizás sean útiles

 img { display: block; 

} o

 img { vertical-align: top/middle/...; 

}

o

 .placeholder { font-size: 0; 

}

Para mí fue una combinación de

 font-size: 0px; line-height: 0; 

en el contenedor de envoltura que lo arregló.