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:
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:
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:
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!
💪🏻 ¿Este post te ha ayudado?, ¿has aprendido algo nuevo?
Pues NO te pido que me invites a un café... Te pido algo más fácil y mucho mejor
