Altura da linha - CSS-Tricks | CSS Almanac 2025

A line-heightpropriedade define a quantidade de espaço acima e abaixo dos elementos embutidos. Ou seja, os elementos definidos como display: inlineou display: inline-block. Esta propriedade é mais freqüentemente usada para definir o entrelinhamento das linhas de texto.

p ( line-height: 1.5; )

A line-heightpropriedade pode aceitar os valores de palavra-chave normalou nonetambém um número, comprimento ou porcentagem.

De acordo com a especificação, um valor de “normal” não é apenas um único valor concreto que é aplicado a todos os elementos, mas sim é calculado para um valor “razoável” dependendo do tamanho da fonte definido (ou herdado) no elemento.

Um valor de comprimento pode ser definido usando qualquer unidade CSS válida (px, em, rem, etc).

Um valor de porcentagem é o tamanho da fonte do elemento multiplicado pela porcentagem. Por exemplo:

Confira esta Caneta!

Na demonstração acima, os três parágrafos têm suas alturas de linha definidas para 150%, 200% e 250%, respectivamente. O elemento body tem seu tamanho de fonte definido em 20px. Isso significa que as alturas de linha calculadas para os parágrafos são 30px, 40px e 50px, respectivamente.

Alturas de linha sem unidade

O método recomendado para definir a altura da linha é usar um valor numérico, conhecido como altura da linha “sem unidade”. Um valor numérico pode ser qualquer número, incluindo um número decimal, como é usado no primeiro exemplo de código nesta página.

As alturas de linha sem unidade são recomendadas devido ao fato de que os elementos filhos herdarão o valor do número bruto, em vez do valor calculado. Com isso, os elementos filhos podem calcular as alturas das linhas com base no tamanho da fonte calculado, em vez de herdar um valor arbitrário de um pai que provavelmente precisará ser substituído.