Propriedade CSS text-indent

A propriedade CSS text-indent define a quantidade de espaço vazio antes da primeira linha de um bloco de texto — o clássico "recuo de parágrafo" encontrado em livros impressos. Ela afeta apenas a primeira linha de cada elemento em nível de bloco; todas as linhas seguintes permanecem alinhadas à borda da caixa.

Por padrão, o recuo é adicionado no início da linha, seguindo a direção de escrita definida pela propriedade direction — na borda esquerda para textos da esquerda para a direita e na borda direita para textos da direita para a esquerda. Um valor negativo puxa a primeira linha na direção oposta (para a esquerda em texto LTR), que é como se cria um recuo suspenso.

Por que e quando usar

Recuo tipográfico de parágrafos. Recuar a primeira linha é a forma tradicional de separar parágrafos sem linhas em branco entre eles — comum em artigos longos e layouts no estilo de livros.
Recuos suspensos. Um text-indent negativo combinado com padding-left correspondente mantém a primeira linha projetada e envolve o restante para dentro — útil para bibliografias e listas de definições.
Ocultar texto de forma acessível. O antigo truque text-indent: -9999px empurrava o texto para fora da tela mantendo-o legível para leitores de tela e mecanismos de busca (amplamente substituído hoje por classes utilitárias de ocultação visual).

text-indent é herdada, portanto um valor definido em um elemento pai é repassado aos contêineres de bloco filhos, a menos que seja sobrescrito.

Aviso

Os valores "each-line" e "hanging" são experimentais.

Valor Inicial	0
Aplica-se a	Contêineres de bloco.
Herdada	Sim.
Animável	Sim. Text-indent é animável.
Versão	CSS1
Sintaxe DOM	object.style.textIndent = "100px";

Sintaxe

Sintaxe da propriedade CSS text-indent

text-indent: length | percentage | each-line | hanging | initial | inherit;

Exemplo da propriedade text-indent:

Exemplo da propriedade CSS text-indent com valor em px

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        text-indent: 100px;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <p>
      This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property. This is same text with text-indent property.
    </p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Exemplo da propriedade text-indent especificada em "pt", "em", "%" e "cm":

Exemplo da propriedade CSS text-indent com valores em pt, cm, % e em

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.a {
        text-indent: 20pt;
      }
      div.b {
        text-indent: -5em;
      }
      div.c {
        text-indent: 70%;
      }
      div.d {
        text-indent: 4em;
      }
      div.e {
        text-indent: 5cm;
      }
    </style>
  </head>
  <body>
    <h2>Text-indent property example</h2>
    <h3>text-indent: 20pt</h3>
    <div class="a">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: -5em</h3>
    <div class="b">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 70%</h3>
    <div class="c">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 4em</h3>
    <div class="d">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
    <h3>text-indent: 5cm</h3>
    <div class="e">
      Lorem Ipsum is dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </div>
  </body>
</html>

Experimente Você Mesmo »

Criando um recuo suspenso

Um text-indent negativo combinado com um padding-left correspondente recua todas as linhas exceto a primeira — o padrão comum para referências e citações:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.reference {
        text-indent: -2em;
        padding-left: 2em;
      }
    </style>
  </head>
  <body>
    <p class="reference">
      Knuth, Donald E. The Art of Computer Programming. Reading,
      Massachusetts: Addison-Wesley, 1968. This long entry wraps onto
      several lines so you can see the hanging indent in action.
    </p>
  </body>
</html>

Valores percentuais

Ao usar uma porcentagem, o recuo é calculado a partir da largura do bloco contêiner, não do tamanho da fonte. Assim, text-indent: 10% em um contêiner de 600px de largura produz um recuo de 60px. Como o valor é relativo, o recuo cresce e diminui conforme o layout é redimensionado, mantendo-o proporcional em páginas responsivas.

Valores

Valor	Descrição	Experimente
length	Especifica o recuo em px, pt, cm, em, etc. O valor padrão é 0. Valores negativos são permitidos.	Experimente »
percentage	Especifica o recuo em porcentagem da largura do bloco contêiner.	Experimente »
each-line	O recuo afeta a primeira linha assim como cada linha após uma quebra de linha forçada, mas não afeta linhas após uma quebra suave. Este valor é uma tecnologia experimental.
hanging	Inverte quais linhas são recuadas. A primeira linha não é recuada. Este valor é uma tecnologia experimental.
initial	Faz a propriedade usar seu valor padrão.	Experimente »
inherit	Herda a propriedade do elemento pai.

Prática

O que a propriedade text-indent faz em CSS?

Ela recua a primeira linha do texto em um bloco.Ela altera a cor do texto.Ela recua todas as linhas do texto em um bloco.Ela ajusta o tamanho do texto.Ela manipula o line-height do texto em um bloco.

Propriedades relacionadas

Para um controle mais preciso sobre o espaçamento e o fluxo do texto, veja estes capítulos relacionados:

text-align — alinhamento horizontal do texto dentro do bloco.
line-height — espaçamento vertical entre linhas.
letter-spacing e word-spacing — espaçamento entre caracteres e palavras.
white-space — como espaços em branco e quebras de linha são tratados.
direction — a direção de escrita que determina de qual borda o text-indent começa.