Propiedad CSS text-indent

La propiedad CSS text-indent establece la cantidad de espacio vacío antes de la primera línea de un bloque de texto — la clásica "sangría de párrafo" que se ve en los libros impresos. Solo afecta a la primera línea de cada elemento a nivel de bloque; el resto de líneas se mantienen alineadas con el borde del contenedor.

Por defecto, la sangría se añade al inicio de la línea, siguiendo la dirección de escritura definida por la propiedad direction — en el borde izquierdo para texto de izquierda a derecha, y en el borde derecho para texto de derecha a izquierda. Un valor negativo desplaza la primera línea en la dirección contraria (hacia la izquierda en texto LTR), que es como se crea una sangría francesa.

Por qué y cuándo usarlo

Sangría tipográfica de párrafos. Sangrar la primera línea es la forma tradicional de separar párrafos sin líneas en blanco entre ellos — habitual en artículos largos y maquetaciones similares a las de los libros.
Sangrías francesas. Un text-indent negativo combinado con un padding-left equivalente mantiene la primera línea hacia afuera y envuelve el resto hacia adentro — útil para bibliografías y listas de definiciones.
Ocultar texto de forma accesible. El antiguo truco de text-indent: -9999px empujaba el texto fuera de la pantalla manteniendo su legibilidad para los lectores de pantalla y los motores de búsqueda (hoy en día reemplazado principalmente por clases de utilidad visualmente ocultas).

text-indent se hereda, por lo que un valor establecido en un elemento padre fluye hacia los contenedores de bloque hijos a menos que se sobrescriba.

Advertencia

Los valores "each-line" y "hanging" son experimentales.

Valor inicial	0
Se aplica a	Contenedores de bloque.
Heredado	Sí.
Animable	Sí. Text-indent es animable.
Versión	CSS1
Sintaxis DOM	object.style.textIndent = "100px";

Sintaxis

Sintaxis de la propiedad CSS text-indent

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

Ejemplo de la propiedad text-indent:

Ejemplo de la propiedad CSS text-indent con valor en 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>

Pruébalo tú mismo »

Resultado

Ejemplo de la propiedad text-indent especificada en "pt", "em", "%" y "cm":

Ejemplo de la propiedad CSS text-indent con valores pt, cm, % y 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>

Pruébalo tú mismo »

Crear una sangría francesa

Un text-indent negativo combinado con un padding-left equivalente sangra todas las líneas excepto la primera — el patrón estándar para referencias y citas:

<!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 en porcentaje

Cuando se pasa un porcentaje, la sangría se calcula a partir del ancho del bloque contenedor, no del tamaño de la fuente. Así, text-indent: 10% en un contenedor de 600px de ancho produce una sangría de 60px. Al ser un valor relativo, la sangría crece y se reduce cuando el diseño cambia de tamaño, lo que la mantiene proporcional en páginas responsivas.

Valores

Valor	Descripción	Pruébalo
length	Especifica la sangría en px, pt, cm, em, etc. El valor por defecto es 0. Se permiten valores negativos.	Pruébalo »
percentage	Especifica la sangría en porcentaje del ancho del bloque contenedor.	Pruébalo »
each-line	La sangría afecta a la primera línea y también a cada línea después de un salto de línea forzado, pero no afecta a las líneas tras un salto de línea suave. Este valor es una tecnología experimental.
hanging	Invierte qué líneas se sangran. La primera línea no se sangra. Este valor es una tecnología experimental.
initial	Hace que la propiedad use su valor por defecto.	Pruébalo »
inherit	Hereda la propiedad de su elemento padre.

Práctica

¿Qué hace la propiedad text-indent en CSS?

Sangra la primera línea de texto de un bloque.Cambia el color del texto.Sangra todas las líneas de texto de un bloque.Ajusta el tamaño del texto.Manipula el interlineado del texto en un bloque.

Propiedades relacionadas

Para un control más preciso sobre el espaciado y el flujo del texto, consulta estos capítulos relacionados:

text-align — alineación horizontal del texto dentro de su bloque.
line-height — espaciado vertical entre líneas.
letter-spacing y word-spacing — espaciado entre caracteres y palabras.
white-space — cómo se gestionan los espacios en blanco y los saltos de línea.
direction — la dirección de escritura que determina desde qué borde comienza text-indent.