Propriedade CSS line-height
Use a propriedade CSS line-height para definir a altura das linhas do texto. Definição, valores e exemplos.
A propriedade line-height especifica a altura de uma caixa de linha, controlando o espaçamento vertical entre as linhas de texto. É uma das propriedades mais importantes para a legibilidade: linhas muito comprimidas são difíceis de ler, enquanto linhas muito espaçadas fazem um parágrafo parecer desconexo.
Esta página aborda a sintaxe, cada tipo de valor aceito, por que valores sem unidade geralmente são a melhor escolha, e as armadilhas de acessibilidade e herança a observar.
O comportamento do line-height varia de acordo com o tipo de elemento:
- Em elementos em nível de bloco, a propriedade
line-heightdefine a altura mínima das caixas de linha dentro do elemento. - Em elementos inline não substituídos, ela define a altura usada no cálculo da altura da caixa de linha.
- Em elementos inline substituídos, como botões ou outros elementos input, o
line-heightgeralmente não afeta o cálculo da altura da caixa de linha.
Valores negativos são válidos.
A line-height padrão é de aproximadamente 110% a 120% na maioria dos navegadores.
A propriedade line-height define o espaçamento entre as linhas de um texto. Se o valor de line-height for maior que o valor de font-size de um elemento, a diferença corresponderá ao espaçamento entre as linhas.
| Valor Inicial | normal |
|---|---|
| Aplica-se a | Todos os elementos. |
| Herdado | Sim. |
| Animável | Sim. A altura das linhas é animável. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.lineHeight = "40px"; |
Sintaxe
Sintaxe da Propriedade CSS line-height
line-height: normal | number | length | percentage | calc | initial | inherit;Exemplo com o valor normal:
Exemplo da Propriedade CSS line-height com o valor normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: normal (default)</h3>
<div>This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Resultado
Exemplo com o valor length:
Exemplo da Propriedade CSS line-height com o valor px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 10px;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 10px</h3>
<div>This is a paragraph with a specified line-height.
<br /> The line height here is set to 10 pixels.
</div>
</body>
</html>Exemplo com o valor percentage:
Exemplo da Propriedade CSS line-height com o valor %(porcentagem)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
line-height: 200%;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h2>line-height: 200%</h2>
<div>This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
</body>
</html>Exemplo com múltiplos valores:
Exemplo da Propriedade CSS line-height com valores cm, px, %(porcentagem), normal e numérico
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div.a {
line-height: 1;
}
div.b {
line-height: 50px;
}
div.c {
line-height: 0.5cm;
}
div.d {
line-height: 1cm;
}
div.e {
line-height: 200%;
}
div.f {
line-height: normal;
}
</style>
</head>
<body>
<h2>Line-height property example</h2>
<h3>line-height: 1</h3>
<div class="a">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1.
</div>
<h3>line-height: 50px</h3>
<div class="b">This is a paragraph with a specified line-height.
<br /> The line height here is set to 50 pixels.
</div>
<h3>line-height: 0.5cm</h3>
<div class="c">This is a paragraph with a specified line-height.
<br /> The line height here is set to 0.5 centimeter.
</div>
<h3>line-height: 1cm</h3>
<div class="d">This is a paragraph with a specified line-height.
<br /> The line height here is set to 1 centimeter.
</div>
<h3>line-height: 200%</h3>
<div class="e">This is a paragraph with a bigger line-height.
<br /> The line height here is set to 200%.
</div>
<h3>line-height: normal</h3>
<div class="f">This is a paragraph with a standard line-height.
<br /> The standard line height in most browsers is about 110% to 120%.
</div>
</body>
</html>Escolhendo um valor: sem unidade vs. com unidade
Esta é a decisão mais importante ao definir line-height, e depende de como o valor é herdado:
- Um número sem unidade (ex.:
line-height: 1.5) é herdado como o fator em si. Cada descendente multiplica o fator pelo seu própriofont-size, de modo que o espaçamento é sempre dimensionado corretamente. - Um comprimento ou porcentagem (ex.:
1.5emou150%) é calculado uma vez no elemento onde é declarado e o valor em pixels resultante é herdado. Descendentes com umfont-sizediferente mantêm essa altura em pixels fixa, o que pode causar sobreposição de texto.
Compare os dois em um elemento pai cujo filho tem uma fonte maior:
<!DOCTYPE html>
<html>
<head>
<style>
/* Recommended: each element scales the factor by its own font-size */
.good { line-height: 1.5; }
/* Problematic: computed pixel height is inherited as-is */
.bad { line-height: 150%; }
.child { font-size: 3em; }
</style>
</head>
<body>
<div class="good">
Parent text. <span class="child">Big inherited line scales fine.</span>
</div>
<div class="bad">
Parent text. <span class="child">Big inherited line may overlap.</span>
</div>
</body>
</html>Regra geral: use um número sem unidade para o texto do corpo. Recorra a um comprimento fixo (px/em) somente quando você deseja deliberadamente uma caixa de linha constante, como centralizar verticalmente uma única linha de texto fazendo o line-height coincidir com a height do elemento.
Acessibilidade
O critério de sucesso de espaçamento de texto WCAG 1.4.12 exige que o conteúdo permaneça legível quando os usuários ajustam o espaçamento entre linhas para pelo menos 1,5× o tamanho da fonte. Um line-height sem unidade de 1.5 ou mais no texto do corpo é um padrão seguro e acessível, e evita quebrar layouts quando um usuário aplica seu próprio espaçamento.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| normal | Define uma altura de linha normal. É o valor padrão desta propriedade. | Experimente » |
| length | Define uma altura de linha fixa em px, cm, em, etc. | Experimente » |
| number | Define um número que é multiplicado pelo tamanho de fonte atual para definir a altura da linha. | Experimente » |
| % | Define uma altura de linha em percentual do tamanho de fonte atual. | Experimente » |
| calc | Define uma altura de linha usando um cálculo. | Experimente » |
| initial | Faz a propriedade usar seu valor padrão. | Experimente » |
| inherit | Herda a propriedade do elemento pai. |
Observação: O uso da unidade em é amplamente recomendado para line-heights escaláveis.