Propiedad line-height

La propiedad line-height establece el espacio entre líneas de texto (interlineado).

La propiedad no establece el espacio entre líneas de texto, como podría parecer, establece la altura de línea de texto. Esto significa que el espacio real entre líneas será calculado así: line-height - font-size = distancia entre líneas de texto. O a la inversa line-height = font-size + distancia entre líneas de texto.

Sintaxis

selector {
	line-height: valor;
}

Valores

Como valor de la propiedad se utilizan cualquier unidad para tamaños. Al especificar un valor en % el interlineado será en porcentaje del tamaño de la fuente.

Además, se puede especificar como valor cualquier número mayor que cero. En este caso, se interpreta como un multiplicador del tamaño de fuente. Por ejemplo, si font-size tiene un valor de 20px, y line-height - 1.5, esto es equivalente a escribir line-height: 30px (20px * 1.5 = 30px).

Por defecto, la propiedad tiene el valor normal, en este caso el navegador selecciona el interlineado automáticamente.

Ejemplo

En este ejemplo, la distancia entre líneas de texto será line-height - font-size = 38px - 18px = 20px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 35px;
	text-align: justify;
}

Ejemplo

Reduzcamos el espacio a 25px - 18px = 7px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 25px;
	text-align: justify;
}

Ejemplo

En este ejemplo, la distancia entre líneas de texto será line-height - font-size = 18px - 18px = 0px - las líneas prácticamente se pegarán (los trazos descendentes de las letras de la línea superior tocarán los trazos descendentes de las letras de la línea inferior):

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 18px;
	text-align: justify;
}

Ejemplo

En este ejemplo, el valor de line-height - es el multiplicador 1.5 del tamaño de fuente. Por lo tanto, line-height será equivalente a font-size * 1.5 = 18px * 1.5 = 27px. Y el espacio real entre líneas será line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 1.5;
	text-align: justify;
}

Ejemplo

Aumentemos el multiplicador:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 2.5;
	text-align: justify;
}

Ejemplo

Si se hace line-height menor que font-size, las líneas se superpondrán completamente:

<p>
	some long text
</p>

p {
	font-size: 18px;
	line-height: 13px;
	text-align: justify;
}