JASoft.org

El blog de José Manuel Alarcón Aguín. Programación web y mucho más...

MENÚ - JASoft: JM Alarcón

line-height sin unidades en CSS: ¿para qué se utiliza?

La propiedad CSS llamada line-height, como su propio nombre indica, define la altura que ocupan los elementos con visualización inline. El nombre viene de la altura que tienen las líneas de texto, que son los elementos inline por antonomasia.

El valor por defecto de esta propiedad es simplemente normal, que quiere decir que el navegador decide un valor "razonable" para la altura que le va a poner a las líneas (a los elementos inline) y que depende del navegador, del tipo de letra, etc... pero que suele andar en torno a 1,12 o 1,13 veces el tamaño del tipo de letra del elemento.

Además le podemos asignar una unidad de longitud CSS, es decir, píxeles, em, rem, porcentajes...

Por ejemplo, si tenemos un párrafo de texto en una página y le establecemos las siguientes propiedades CSS:

.contenido {
    line-height: 1.5em;
}

Veremos que la altura de las líneas cambia de la siguiente manera:

Cambio de altura de línea

siendo las líneas más pegadas, el valor por defecto (1.13 en Chrome, que es la captura) , y las que están más separadas el 1.5em que le acabamos de poner. Al haber indicado em como unidades de longitud lo que estamos diciendo es que la altura de la línea deberá ser un 50% mayor que el tamaño de la letra de dicha línea.

Bien, hasta aquí todo normal. La cuestión es que te vas a encontrar por ahí muchas veces propiedades line-height que no usan unidades, es decir, esto:

.contenido {
    line-height: 1.5;
}

Es decir, ni em, ni px, ni nada. Sólo un número. WTF?

Bien, esto es un valor totalmente válido en el caso de line-height, y quiere decir que se utilice 1,5 veces el tamaño de la letra del elemento, o sea, exactamente lo mismo que en el caso anterior con em. Entonces ¿para qué obviar las unidades? Sería mucho mejor ponerlas y así sabemos seguro qué estamos haciendo, además de que en otras propiedades CSS con unidades de longitud no se pueden obviar las unidades.

La diferencia entre poner las unidades o no poner nada es pequeña pero sutil: si no ponemos la unidades, los elementos hijos del actual acomodarán el tamaño de sus líneas al tamaño de letra que tengan, ya que heredan el valor de esta propiedad, en lugar de usar el mismo valor que el elemento "padre".

Es decir, si ponemos 1.5em y este valor resulta en 24px (el tamaño de letra por defecto suele ser 16px), si tenemos un elemento hijo tendrá también esos 24px como valor de su altura de línea, independientemente del tamaño de la letra que tengan. Pero si no especificamos unidades, entonces no heredan el valor fijo, sino que heredan el multiplicador, y adaptarán su altura de línea al tamaño de letra que tengan, sin usar el del padre.

Para verlo mejor vamos a considerar un ejemplo muy simple, pero ilustrativo. Tenemos un par de elementos de bloque uno dentro de otro, conteniendo texto (el texto es un elemento en línea) y con dos tamaños de letra muy diferentes: el elemento padre con un tamaño grande de 30px y el hijo uno pequeño de 10px. Al padre le aplicamos un line-height: 1.5em. El resultado sería este:

line-height con unidades

Fíjate en cómo el texto del elemento interno hereda el mismo valor exactamente de altura de línea que el elemento superior, por lo que queda una enorme separación entre ellas y se monta en el elemento inferior.

Sin embargo, si cambiamos la altura de la línea y no especificamos unidades, dejando tan solo el multiplicador, de manera automática el navegador entiende que queremos ese multiplicador en función del tamaño de letra de cada elemento en línea, y en este caso al tener el elemento "hijo" un tamaño de letra muy inferior, se adapta de manera correcta y se muestra en un espacio mucho más reducido:

line-height sin unidades

Es una diferencia sutil pero muy importante y que, si no la conoces, hará que tengas que estar metiendo a mano las alturas de línea en todos los elementos que hereden esta propiedad de elementos superiores, y variándola cada vez que toques los tamaños de letra. Sabiendo esto puedes establecer el valor una única vez y todos los elementos se adaptarán adecuadamente.

Es por esto que verás más a menudo la propiedad line-height sin unidades que con ellas, y no debe extrañarte.

¡Espero que te resulte útil!

José Manuel Alarcón José Manuel Alarcón
Fundador de campusMVP.es, el proyecto de referencia en formación on-line para programadores en lengua española. Autor de varios libros y cientos de artículos. Galardonado como MVP de Microsoft desde 2004. Gallego de Vigo, amante de la ciencia y la tecnología, la música y la lectura. Ayudando a la gente en Internet desde 1996.
Descarga GRATIS mi último libro (no técnico): "Tres Monos, Diez Minutos".
Banner

Agregar comentario