JMiur [E]

La propiedad line-height puede resultar algo confusa ya que, por lo general, es "invisible"; por ejemplo, si la agrego a un elemento inline como SPAN que tenga un color de fondo, no parece tener efecto sobre el texto pero, se "separa" de lo que está arriba y abajo:

In hac habitasse platea dictumst.

Es más fácil de ver si coloco esa propiedad en un bloque como un DIV o P:
<div style="line-height: 50px;">
  <span style="background-color:#456;">In hac habitasse platea dictumst.</span>
</div>

In hac habitasse platea dictumst.

In hac habitasse platea dictumst.

In hac habitasse platea dictumst.

Allí podemos ver que ese rectángulo coloreado y con un borde, al que sólo le vamos cambiando el valor de line-height (20, 50, 100), se va haciendo cada vez más alto y el texto, siempre queda centrado verticalmente.


Eso es exactamente lo que es line-height, la altura de una línea, de cualquier línea y si bien sirve para alinear verticalmente algo, este método sólo es útil cuando cuando eso que queremos mostrar no es demasaido ancho ya que si es excesivo y requiere dos líneas, las cosas se verán mal:

In hac habitasse platea dictumst.
In hac habitasse platea dictumst.

Por defecto, a menos que esté definida globalmente, el valor de line-height es 1; eso, significa que la altura de una línea es exactamente igual al tamaño de la fuente; en este caso, la altura del DIV será exactamente de 50 pixeles ya que 28 + 22 = 50:

font-size:28px
font-size:22px

Usando valores absolutos, la altura se calcula fácilmente, basta multiplicar ese número por el tamaño de la fuente. Si en el ejemplo anterior, line-height tuviera el valor 1.5, la altura total sería de: 28 * 1.5 + 22 * 1.5 = 70 pixeles

font-size:28px
font-size:22px

Suelen usarse otras propiedades; px para pixeles es fácil de entender en cambio, em no es tan simple ya que es un valor empleado en tipografía (más información) y es bastante arbitrario; en los dos ejemplos anteriores, la altura final del contenedor será de 37 o 51pixeles pero, esos valores variarán si la fuente es otra; por el contrario, si los valores son expresados como absolutos o en pixeles, el tipo de fuente no tendrá influencia y la altura será siempre la misma.

Como dije, line-height define la altura de una línea pero eso no significa que sólo se aplique a los textos. También es una forma de alinear imágenes verticalmente:
<div style="line-height: 300px;">
  <img style="vertical-align:middle" src="URL_imagen"/>
</div>
Ese DIV tendrá 300 pixeles de alto y una imagen centrada, sin importar el tamaño de esa imagen salvo que, clar, supere los 300 pixeles de alto en cuyo caso, se mostrará completa y el valor de line-height será ignorado:


5 comentarios:

Gem@  

En el caso de las imágenes centradas ¿qué es más correcto entonces añadir la propiedad line-height o márgenes?

Responder
Gem@  

¿Dije márgenes? me refería a padding porque en este caso las dos propiedades dejan espacio entre la imagen y el borde.

Responder
Luis Kasanova  

Hola JMiur,

Sé que este comentario no tiene nada que ver con la entrada, es sólo que te envié un mensaje a través del formulario de contacto, pero cuando lo envié apareció un pequeño cuadro blanco, no sé si eso indicaba que te había llegado, es sobre el tema de HTML5.

Agradezco tu ayuda.

Saludos!

Responder
JMiur  

Gem@:
En realidad, depende de cada caso, no hay reglas únicas. Yo, en lo personal, trato de evitar el uso de márgenes o paddings para ubicar cosas siempre, dentro de lo posible.

Fíjate en el ejemplo del texto; si lo centrara verticalmente con padding, el color de fondo se extendería porque el padding es parte del objeto; es un espacio "real" y, si la etiqueta no es una etiqueta de bloque, padings o márgenes verticales no tienen efecto alguno.

Luis Kasanova: No, no veo que haya llegado ningún mensaje.

Responder
Luis Kasanova  

Te lo acabo de enviar directamente desde mi correo, parece que el formulario de contacto está fallando, o por lo menos lo estaba cuando intenté enviarte dos veces el mensaje.

Saludos!

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR