3px de altura adicional en un div con una imagen dentro de él

Question

Estoy trabajando en un nuevo sitio, pero hay un pequeño diseño que no puedo entender.

Básicamente, estoy creando un sitio al que los usuarios pueden cargar imágenes divertidas. Aunque el área donde se muestra la imagen hay una brecha de 3 píxeles debajo. Aquí hay un enlace a una captura de pantalla de lo que quiero decir, enlace muerto.

He intentado una tonelada de cosas pero nada parece funcionar. Si alguien puede sugerir alguna solución, por favor hazlo.

Gracias.

Answer 1

Se debe al valor predeterminado vertical-align de las imágenes. Ellos son baseline. Cambie a top o bottom y desaparecerá.

img{ 
    vertical-align: top; 
} 

El espacio extra es el área por debajo de la línea de base que es para las letras que cuelgan por debajo como y o g.