Propriedade line-height

A propriedade line-height define o espaçamento entre as linhas de texto (espaçamento entre linhas).

A propriedade não define o espaçamento entre as linhas de texto, como poderia parecer, ela define a altura da linha de texto. Isso significa que o espaçamento real entre as linhas será calculado assim: line-height - font-size = distância entre as linhas de texto. Ou inversamente line-height = font-size + distância entre as linhas de texto.

Sintaxe

seletor {
	line-height: valor;
}

Valores

Os valores da propriedade são quaisquer unidades de medida para tamanhos. Ao especificar um valor em %, o espaçamento entre linhas será uma porcentagem do tamanho da fonte.

Além disso, pode-se definir como valor qualquer número maior que zero. Neste caso, ele é tratado como um multiplicador do tamanho da fonte. Por exemplo, se font-size tem o valor 20px, e line-height - 1.5, isso é o mesmo que escrever line-height: 30px (20px * 1.5 = 30px).

Por padrão, a propriedade tem o valor normal, neste caso o navegador seleciona o espaçamento entre linhas automaticamente.

Exemplo

Neste exemplo, a distância entre as linhas 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;
}

Exemplo

Vamos reduzir o espaçamento para 25px - 18px = 7px:

<p>
	some long text
</p>

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

Exemplo

Neste exemplo, a distância entre as linhas de texto será line-height - font-size = 18px - 18px = 0px - as linhas praticamente se fundirão (os traços inferiores das letras da linha superior tocarão nos traços superiores das letras da linha inferior):

<p>
	some long text
</p>

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

Exemplo

Neste exemplo, o valor line-height - é o multiplicador 1.5 do tamanho da fonte. Consequentemente, line-height será equivalente a font-size * 1.5 = 18px * 1.5 = 27px. E o espaçamento real entre as linhas será line-height - font-size = 27px - 18px = 9px:

<p>
	some long text
</p>

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

Exemplo

Vamos aumentar o multiplicador:

<p>
	some long text
</p>

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

Exemplo

Se line-height for menor que font-size, as linhas se sobreporão completamente:

<p>
	some long text
</p>

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