Propriedade line-height
Última atualização: 2026-09-13
line-height Propriedade line-height
A propriedade line-height do CSS define o espaço vertical entre as linhas de texto. Uma altura de linha bem escolhida melhora significativamente a legibilidade de textos longos, tipicamente cerca de 1,5 vezes o tamanho da fonte.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | number |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
line-height: normal | <number> | <length> | <percentage>;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | Palavra-chave | Altura de linha padrão (cerca de 1,2) |
<number> | Tipo | Um multiplicador sem unidade, por exemplo 1,5 |
<length> | <percentage> | Tipo | Uma altura de linha fixa como comprimento ou porcentagem |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| line-height | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： Prefira números sem unidade (como 1,5): eles escalam com o tamanho da fonte e seu comportamento de herança é mais previsível.
Importante： Números sem unidade e porcentagens são herdados de forma diferente: um número sem unidade é herdado como multiplicador, enquanto uma porcentagem é resolvida em relação ao tamanho da fonte do pai e herdada como valor fixo em pixels.
❓ Perguntas Frequentes
QComo centralizo verticalmente uma única linha de texto usando regras CSS?
ADefina line-height igual à altura do contêiner, por exemplo height: 40px; line-height: 40px, e a única linha será centralizada verticalmente. No entanto, texto de várias linhas transbordará; nesse caso, você deve mudar para Flexbox com align-items: center.
QQual altura de linha devo usar para um texto de corpo legível no meu site?
APara o texto de corpo, recomenda-se de 1,5 a 1,8 vezes o tamanho da fonte; leituras longas se beneficiam de 1,7 a 1,8, enquanto títulos podem ser mais apertados, de 1,2 a 1,4. Blocos de código costumam usar de 1,4 a 1,6. Em dispositivos móveis, onde as telas são mais estreitas, a altura de linha geralmente precisa ser um pouco maior do que no desktop.
QQual é a diferença entre line-height: 1,5 e line-height: 150%?
AA diferença está na herança. O 1,5 sem unidade é um multiplicador, então os filhos calculam sua altura de linha a partir de seu próprio tamanho de fonte — comportamento previsível. Uma porcentagem como 150% é resolvida como valor fixo em pixels em relação ao tamanho da fonte do pai antes de ser herdada, então não se ajusta quando o tamanho da fonte dos filhos muda, o que pode causar problemas.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
