soy Kseso y esto EsCSS

El misterioso espacio extra en divs sin altura declarada. Su porqué y 3+1 soluciones

Tres soluciones (+1) al misterioso espacio inferior extra que aparece bajo las imágenes en los divs que no tienen declarada altura. Su origen, propiedades implicadas y el porqué ocurre.

El misterioso espacio extra en divs sin altura declarada. Su porqué y 3+1 soluciones

·Por Kseso ✎ 13
El misterioso espacio extra en divs sin altura declarada. Su porqué y 3+1 soluciones

El típico problema: tienes un elemento de bloque para alojar algún elemento de altura desconocida, i.e. un div y una imagen, y al visualizarlo te encuentras con un espacio en la parte inferior, entre la imagen y el div.
Y por más que pones a 0 los bordes, márgenes y paddings no hay manera. Posíblemente hayas terminado por declarar como bloque la imagen.

Pero si tienes más de una en la misma caja te ves obligado a tener que añadir declaraciones. Lo más usual flotarlas. Y eso te obliga a seguir sumando: ahora tienes que limpiar los flotados. Y a continuación... más código para parchear un problema que no es tal y una mala solución.

Pero si has tenido la suerte de no toparte con este problema, mira la siguiente imagen: Es un div sin altura especificada y una imagen dentro. Para hacer visible lo que ocurre, el div tiene un borde y un fondo.

recorte del espacio extra generado en elementos sin altura declarada
La zona amarilla se corresponde con el espacio no deseado.

La imagen previa se corresponde con este jsfiddle. En el siguiente pen lo puedes ver un poco más exagerado:

See the Pen yeyxGo by Kseso (@Kseso) on CodePen.

De dónde sale el espacio misterioso

Si has sido sufridor de este comportamiento quizás hayas notado que sólo se manifiesta cuando se trata de un elemento de línea. Como las imágenes. De ahí que algunos autores ataquen el problema como te decía al inicio: un display: block a la imagen.

Pero con eso, aunque se arregle en ciertos casos, no en todos es efectivo o la mejor solución. Y además se evidencia que no se ha comprendido el porqué ocurre.

La razón de este espacio misterioso tiene que ver con tres propiedades css:

  1. La alineación vertical o vertical-align y cómo se realiza en Css
  2. El tamaño de la tipografía o font-size
  3. La altura de línea o line-height que está relacionada con la anterior.

Los valores de vertical-align

Los valores tradicionales (Css2.1) de esta propiedad son:
baseline | sub | super | top | text-top | middle | bottom | text-bottom | <porcentaje> | <medida> | inherit
El valor por defecto o inicial es baseline

Cómo se calcula el alineado vertical en CSS

En este caso te ahorro una larga explicación al respecto y te remito a este artículo del blog: Line-height y vertical-align: cómo trabajan y se calcula la línea base del alineamiento vertical

Sólo un resumen de lo allí explicado y que ves en la imagen: en css la alineación vertical no se calcula sobre la parte superior o inferior del line-height sino que toma como referencia la línea azul de la imagen que se conoce como "medio interlineado":

cálculo de la línea base en css para la alineación vertical
Cálculo de la línea base en css para la alineación vertical

El espacio vacío es...

Efectivamente, esa franja amarilla del ejemplo no es ni más ni menos que el espacio que hay entre el "medio interlineado de Css" y la base del line-height. Mayor o menor en función de la relación entre el valor de font-size y de line-height.

Soluciones al espacio inferior extra en divs sin altura

Comprendida la naturaleza del problema y a qué corresponde ese espacio extra en la parte inferior del div es sencillo plantear la solución atacándolo de raiz.

font-size

Vía font-size

Tan sencillo como declarar un valor lo suficientemente bajo para font-size. El espacio vacío desaparece. Pero quizás no sea muy acertado en todas las ocasiones usar esta solución.

Piensa en qué pasaría si es un elemento figure con su imagen y figcaption.

Vía line-height

line-height

El segundo actor en esta función es la altura de línea, cuanto mayor más espacio vacío. Así que si lo declaras lo suficientemente bajo (tanto como cero) adiós al espacio extra. La imagen pegadita al borde inferior.

Pero vuelve a surgir la misma duda que antes: quizás no sea buena idea en todas las situaciones.

Vía vertical-align

vertical-alignAsí que si tenemos en el mismo div una imagen y texto a su lado, las dos soluciones anteriores serían problemáticas. Para ello tenemos la tercera propiedad que interviene en la aparición de espacios: vertical-align.

Cambiando el valor inicial por text-top o top, por ejemplo, asunto arreglado.

Puedes ver las tres soluciones al problema del espacio extra o vacío en la parte baja de los div en este jsfiddle o en el pen de abajo que agrupa el problema y las tres soluciones:

See the Pen Extra unknown space at the bottom of divs. 3 Solutions by Kseso (@Kseso) on CodePen.

Ver demo

Artículo publicado originalmente el 20 de Febrero de 2012. Corregido y actualizado en Diciembre de 2015.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso