LibrosWeb.es

La propiedad text-indent establece la tabulación o indentación de la primera línea de texto de un elemento. La tabulación se puede indicar mediante cualquiera de las unidades de medida definidas por CSS 2.1, incluyendo los porcentajes.

El valor de esta propiedad se hereda entre elementos, por lo que si se quiere tabular por ejemplo la primera línea de todos los párrafos de un elemento, se puede establecer la propiedad text-indent directamente sobre el elemento contenedor de todos los párrafos:

div { text-indent: 2em; }
 
<div>
  <p>Lorem ipsum...</p>
  <p>Lorem ipsum...</p>
  <p>Lorem ipsum...</p>
  ...
</div>

La regla CSS anterior no sólo tabula la primera línea de texto de los párrafos, sino que también tabula la primera línea de texto de cualquier elemento de bloque contenido dentro del elemento <div>.

En muchos libros impresos es habitual tabular la primera línea de todos los párrafos salvo la del primer párrafo. En este caso, la regla CSS anterior no es correcta y se debe hacer uso de un selector avanzado de tipo adyacente:

p + p {
  text-indent: 1em;
}

El selector p + p se interpreta como "aquellos párrafos que se encuentran detrás de otros párrafos y cuyo elemento contenedor sea el mismo". Por tanto, la regla CSS anterior se aplica a todos los párrafos salvo al primero.

Si el sentido de la escritura, establecido con la propiedad direction, es de derecha a izquierda, la tabulación se inserta en la parte derecha de la primera línea del texto:

Si el elemento contiene texto generado dinámicamente, la propiedad text-indent también lo tiene en cuenta:

p {
  text-indent: 3em;
}
p:before {
  content: "texto generado dinámicamente ";
}
 
<p>Lorem ipsum dolor sit amet...</p>

Las reglas CSS anteriores producen el siguiente resultado:

La tabulación siempre se aplica sobre la primera línea de contenido del elemento, por lo que si el primer contenido del elemento es una imagen, esta también se tabula:

La propiedad text-indent también permite el uso de valores negativos, que hace que la tabulación se aplique en el sentido contrario:

Cuando se utilizan valores negativos, el contenido de la primera línea se puede salir del elemento. El comportamiento del contenido que se sale se puede controlar mediante la propiedad overflow.

Aunque el uso de tabulaciones negativas puede parecer absurdo, muchos sitios web emplean esta técnica como parte de un truco que permite sustituir texto normal por imágenes.