Propiedad line-height (Referencia de CSS 2.1)

Definición	Establece el interlineado del texto
Valores permitidos	Uno y sólo uno de los siguientes valores: normal número medida porcentaje inherit
Valores permitidos	Si se utilizan porcentajes, hace referencia al tamaño de letra del propio elemento
Valor inicial	normal
Se aplica a	Todos los elementos
Válida en	medios visuales
Se hereda	si
Definición en el estándar	w3.org/TR/CSS21/visudet.html#propdef-line-height

Ejemplos de uso

La propiedad line-height establece la altura de cada línea que forma el contenido de texto de un elemento, por lo que se emplea para controlar el interlineado del texto. El uso de line-height es imprescindible cuando se quiere facilitar la lectura de los contenidos de una página.

Si el valor de line-height es mayor que el tamaño de letra del texto, los navegadores añaden un espacio de separación del mismo tamaño por encima y por debajo del texto. En los elementos de bloque, la propiedad line-height indica la altura mínima de sus contenidos de texto. En los elementos en línea, line-height indica directamente la altura de la caja que forma ese elemento (salvo las imágenes, cuya altura se determina mediante la propiedad height).

El interlineado se puede establecer mediante cuatro tipos de valores. El valor por defecto es normal, que indica al navegador que se debe utilizar un valor razonable en función del tamaño de letra del texto. El estándar no establece ese valor razonable, pero recomienda que sea un número comprendido entre 1.0 y 1.2.

line-height: 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

line-height: normal Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

El interlineado también se puede establecer mediante cualquiera de las unidades de medida absolutas y relativas de CSS, como por ejemplo píxel, puntos y porcentajes:

line-height: 24px Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

line-height: 16pt Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

line-height: 130% Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

Si se utilizan porcentajes, el valor que se toma como referencia es el tamaño de letra del texto, por lo que line-height: 130% significa que el tamaño de cada línea debe ser un 30% superior al tamaño de la letra.

Por último, el interlineado en CSS también se puede establecer mediante un número sin unidades de medida, que se interpreta como el múltiplo del tamaño de letra del elemento:

line-height: 1.3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

line-height: 1.6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

line-height: 2.1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.

Se recomienda utilizar esta última forma de establecer el interlineado porque es la más sencilla y la más flexible, ya que se adapta correctamente a cualquier cambio en el tamaño de letra del texto.

Si el texto se muestra con varios tipos o tamaños de letra diferentes, el navegador toma el tamaño de la letra más grande para calcular el valor de la propiedad line-height.

line-height: 1.6 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. [font-size: 1.5em] Fusce ut leo eu ipsum faucibus pretium. Donec iaculis lorem eleifend mi tempor porttitor. Integer porttitor dui vel dui. Donec ornare adipiscing pede. Proin elementum augue ut magna.