El misterioso espacio extra en divs sin altura declarada. Su porqué y 3+1 soluciones 8.12.15
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
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.
La imagen previa se corresponde con este jsfiddle. En el siguiente pen lo puedes ver un poco más exagerado:
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:
- La alineación vertical o vertical-align y cómo se realiza en Css
- El tamaño de la tipografía o font-size
- 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":
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.
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
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
Así 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:
Artículo publicado originalmente el 20 de Febrero de 2012. Corregido y actualizado en Diciembre de 2015.
%20al%20misterioso%20espacio%20inferior%20extra%20que%20aparece%20bajo%20las%20im%C3%A1genes%20en%20los%20divs%20que%20no%20tienen%20declarada%20altura.%20Su%20origen,%20propiedades%20implicadas%20y%20el%20porqu%C3%A9%20ocurre.){kind=link}
Kseso
the obCSServer ᛯ 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 Kseso
No estaba enterado que existía ese problema xD, gracias!
ResponderEliminarMuy buen dato, me servirá bastante.
ResponderEliminarMil gracias. me funciono a la primera con el font-size: 0;
ResponderEliminarSaludos y gran aporte!!
Hola amigo me acabo de encontrar con este problema y comento algo que que me parece mas extraño todavia. Esto solo pasa cuando en el documento tienes un doctype html5 o stricto,en transitional no pasa, yo siempre he maquetado en transitional,pero quise dar el paso a html5,hay enpezo mi problema que jamas habia visto.
ResponderEliminarA mi no me funcionó, pero declaré en img de la siguiente forma:
ResponderEliminarimg {
max-width: 100%;
vertical-align: top;
}
Ya que no solamente me pasaba en una sección si no en varias.
A mi no me funcionó, pero declaré en img de la siguiente forma:
Eliminarimg {
max-width: 100%;
vertical-align: top;
}
Voy a ver si encuentro la diferencia con la 3ª solución propuesta en el artículo.
Ahora vuelvo.
Hola victor a que te refieres cuando comentas que a ti no te funciono? He leid el post un par de veces y tampoco llego a comprender exactamente porque pasa lo del espacio misterioso.
ResponderEliminarCon vertical-align: bottom, incluso middle tambien funciona se solucionaria el problema, si tenemos una imagen y un texto junto, como dice en el post, las dos soluciones font zise y line height pueden ser problematicas. Con vertical align tambien pueden ser problematicas, ya que alomejor no quieres que el texto con vertical align: top se ponga en la parte superior, pues poniendole bottom desaparece tambien ese espacio. Comento tambien una cosa cuando tenemos una imagen con un texto junto si es normal que se cree ese espacio debajo de la image, porque si no quedaria algunas letras por debajo del div,(lo he probado todo), lo que no es normal que lo haga sin texto ni nada junto. Y tambien decir que he probado que solo pasa cuando tu documento tenga un doctype XHTML 1.0 strict HTML 4.01 strict, XHTML 1.1 y html5
ResponderEliminarHola, un gustazo leer este articulo. Cuando te dedicas a Mailing (sin plantillas html) es una de las cosas que tienes que estar muy pendiente para evitar separaciones imprudentes.
ResponderEliminarJajaja me dio una risa lo del float, hace poco me llamo un ingeniero a que le ayudara con una vista y cuando le pregunte que por qué seguía usando float (en ese ejemplo en concreto donde no era necesario) me sorprendió que el no sabía como mas lograr que se apilaran elementos block uno al lado de otro y el "sí se dedica a eso" por así decirlo.
Saludos.
¡Genial!, ya puedo dormir tranquilo.
ResponderEliminarGracias por el artículo, llevaba años sin saber de dónde leches venía ese espacio y a estas alturas pensaba que era ya un misterio al estilo de las caras de Bélmez.
Un saludo.
Gracias amigo me salvaste, me estaba volviendo loco con ese "misterioso" espacio que habia debajo de mi imagen de portada para una web...
ResponderEliminarMe funciono con Vertical Aligne: Top , excelente, gracias por la ayuda, le di click a tu banner por agradecimiento!
ResponderEliminarMe sirvió dejar "font: 0;" en Explorer 10 funcionó.
ResponderEliminar