Altura de línea - Trucos CSS

La line-heightpropiedad define la cantidad de espacio por encima y por debajo de los elementos en línea. Es decir, elementos que se establecen en display: inlineo display: inline-block. Esta propiedad se utiliza con mayor frecuencia para establecer el principio de las líneas de texto.

p ( line-height: 1.5; )

La line-heightpropiedad puede aceptar los valores de la palabra clave normalo nonetambién un número, longitud o porcentaje.

Según la especificación, un valor de "normal" no es solo un valor concreto único que se aplica a todos los elementos, sino que se calcula a un valor "razonable" dependiendo del tamaño de fuente establecido (o heredado) en el elemento.

Se puede definir un valor de longitud utilizando cualquier unidad CSS válida (px, em, rem, etc.).

Un valor porcentual es el tamaño de fuente del elemento multiplicado por el porcentaje. Por ejemplo:

¡Mira este bolígrafo!

En la demostración anterior, los tres párrafos tienen sus alturas de línea establecidas en 150%, 200% y 250%, respectivamente. El elemento del cuerpo tiene su tamaño de fuente definido en 20px. Esto significa que las alturas de línea calculadas para los párrafos son 30px, 40px y 50px, respectivamente.

Alturas de línea sin unidad

El método recomendado para definir la altura de la línea es usar un valor numérico, denominado altura de línea "sin unidades". Un valor numérico puede ser cualquier número, incluido un número decimal, como se usa en el primer ejemplo de código de esta página.

Se recomiendan alturas de línea sin unidades debido al hecho de que los elementos secundarios heredarán el valor numérico sin procesar, en lugar del valor calculado. Con esto, los elementos secundarios pueden calcular sus alturas de línea en función de su tamaño de fuente calculado, en lugar de heredar un valor arbitrario de un padre que es más probable que necesite anularlo.

Soporte del navegador

Cromo	Safari	Firefox	Ópera	ES DECIR	Androide	iOS
Trabajos	Trabajos	Trabajos	Trabajos	Trabajos	Trabajos	Trabajos

IE6 / 7 calculará mal la altura de la línea en los elementos reemplazados (por ejemplo, controles de formulario) que están en línea.