Extraño espacio bajo las imágenes
22/10/2018 by Casanova

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:

Codigo de ejemplo

Que da como resultado:

Imagen de ejemplo

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.

Calculo de interlineado

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;

 

Tags

Add new comment

The content of this field is kept private and will not be shown publicly.

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.