5.1.1.

21 enero 2005

Espacio bajo las imagenes

Categorí­a

Para tener en cuenta: DIV, por defecto, tiene asignado un valor de 0 para las propiedades margin y padding.

Teniendo el siguiente código:

<div style="background:#ccc">
 <img src="dummy.jpg" alt="Imagen de ejemplo">
</div>

Si lo prueban (en Firefox u Opera), verán que, curiosa e inesperadamente, bajo la imagen queda un pequeño margen que no quiere irse aunque todos los margin y padding tengan un valor de 0.

¿Cuál es el problema entonces? En principio hay que tener en cuenta que las imagenes están definidas como display:inline por lo que funcionan como texto.

Volviendo un poco atras en el tiempo, cuando todos estabamos en primario, recordaremos que nos enseñaron a escribir por sobre el renglón; y los navegadores gráficos no escapan a esta regla. El texto (en modo gráfico) mantiene la costumbre de escribirse en relación a un renglón (ahora invisible). En la siguiente imagen, la linea roja representa el renglón:

Imagen: Texto alineado con el renglón

Como se puede apreciar, sigue existiendo un margen de espacio bajo el renglón. Este espacio está reservado para la parte descendente de las letras minusculas g, j, p, q e y. Justamente la parte descentente de estas letras se ubica por debajo de la linea del renglón.

Imagen: Las letras con descendentes usan el espacio bajo el renglón

Si ubicamos una imagen seguida de texto, el efecto es más nototio

Imagen: Imagenes y texto sobre el mismo renglón

Solución 1: display:block

Definir display:block para las imagenes. Siendo un bloque (o caja), todas las consideraciones con respecto al tamaño de la linea (o line-height en CSS) desaparecen. La contra de ésto es que la imagen ocuparía todo el ancho de la linea, provocando que el texto adyacente ocupe una linea diferente.

Solución 2: Jugando con vertical-align

Sobre esta propiedad quisiera extenderme un poco porque resultó un tanto interesante. Por defecto, las imagenes (por su display:inline) están definidas como vertical-align:baseline.

baseline
Align the baseline of the box with the baseline of the parent box. If the box doesn't have a baseline, align the bottom of the box with the parent's baseline.

O sea, el extremo inferior de la imagen va alineado a la linea de renglón (o baseline). Lo que se necesita es un valor para alinear la imagen con el extremo inferior de la linea (no confundir renglón con linea). Para tal fin existen dos propiedades que, en principio, parecen funcionar igual: bottom y text-bottom

Empezando por text-bottom, que es la que sirve para este proposito:

text-bottom
Align the bottom of the box with the bottom of the parent element's font.

Con the box, en este caso, se está refiriendo a la imagen. Entonces, text-bottom alinea la parte inferior de la imagen con el extremo inferior de la letra (referida como parent element's font). Por tanto, si los descendentes de las letras ocupan 50px, entonces la imagen estará ubicada 50px por debajo del renglón.

Imagen: La imagen alineada con el extremo inferior de la letras

Por otro lado, bottom, a simple vista, funciona igual. Nuevamente la imagen parece alineada con el final de las letras, pero la definición propone otro uso.

bottom
Align the bottom of the box with the bottom of the line box.

line-box se refiere a la linea que ocupan las letras (de pies a cabeza, sin importar el renglón). Normalmente la altura de la linea está dictada por el tamaño de la fuente, por lo que la diferencia no se nota. Pero la altura de la linea puede ser modificada con line-height, por lo que si definimos line-height:100px, entonces la imagen será situada 100px más abajo, mientras que el texto va a seguir centrado verticalmente en esta inmensa linea.

Imagen: La imagen alineada con el extremo inferior de la linea

Notese que text-bottom funciona en relación con el tamaño de las fuentes, mientras que bottom en función del tamaño de la linea.

There's a bug in the floor!

De las pruebas con IE6, Opera 7 y FF, las consideraciones son mínimas.

  • Los tres navegadores soportan text-bottom. Dicho de otra manera: IE soporta text-bottom. Siendo una propiedad que sinceramente desconocía , me sorprendió la amplia implementación. Aunque se trata de una propiedad que ya había aparecido en CSS1, por lo que no debería sorprenderme tanto.
  • Para no traicionar su tradicional inconformismo, IE no muestra el espacio extra para descentes si en la linea hay solamente una imagen. Igualmente, cualquier caracter en la misma linea de la imagen, provoca la mágica reaparición.
  • En Opera e IE existe lo que parece ser un bug referido al valor bottom para las imagenes. Si no existe un valor explicito para line-height, vertical-align:bottom es interpretado como vertical-align:top.

Epilogo

Sé que a ¿prácticamente? nadie le interesan estos temas, pero como en otro momento planeo explicar una técnica que requería entender este tema, me parecio correcto intentar explicarlo.

Powered by Blogger