Front.id

Tal vez alguna vez habras notado que tienes una imagen colocada dentro de un contenedor, un div o un link por ejemplo y hay un molesto espacio debajo de la imagen, compruebas la imagen, tu CSS y no logras entender que ocurre.

Ejemplo

Veamos el ejemplo:

Que da como resultado:

Este espacio no es un misterio sino que tiene lógica y ahora vamos a ver a que se debe esto y cual es la solución.

Explicación

Esto ocurre porque las imágenes son elementos inline y para todos los elementos en linea nuestro navegador realiza un calculo del interlineado (que es el resultado de restarle al line-height el font-size). A este resultado lo divide entre dos colocando medio interlineado por encima del texto y medio por debajo.

Seguramente te estarás preguntando porque esto nos afecta si no hemos colocado ningún texto...
Pues bien, cuando no hay texto el navegador coloca un glifo*, un símbolo, con ancho cero al principio del elemento y que posee el medio interlineado inferior. Ese es el motivo por el cual aparece ese espacio fantasma, es el medio interlineado del elemento.

* Un glifo es un símbolo, cada letra, número, signo de puntuación o espacio que insertas con el teclado es un glifo.

Posibles soluciones

Podemos corregir esto aplicando estilos al contenedor o aplicandoselos directamente a la imagen según nuestras necesidades. Vamos a ver tres posibles soluciones que podemos elegir.

Solución 1
Aplicando al contenedor:

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

Solución 2
Aplicando a la imagen:

display: block;

Solución 3
Aplicando a la imagen:

vertical-align: top;