CSS text-indent playground

Explore text-indent with controls for indenting the first line of a block, changing text direction, and trying the hanging and each-line keywords.

BaselineLab muestra text-indent en la primera línea de un bloque para que puedas medir la entrada del párrafo.
Esta línea aparece después de un salto forzado y permite comprobar el efecto de each-line.
Con hanging activado se invierte la lógica: las líneas posteriores reciben la sangría y la primera queda al borde.

HTML

<p class="text-indent-sample" dir="ltr">
  BaselineLab muestra text-indent en la primera línea de un bloque para que puedas medir la entrada del párrafo.<br>
  Esta línea aparece después de un salto forzado y permite comprobar el efecto de each-line.<br>
  Con hanging activado se invierte la lógica: las líneas posteriores reciben la sangría y la primera queda al borde.
</p>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<p class="max-inline-xl text-lg leading-7 indent-8" dir="ltr">
  BaselineLab muestra text-indent en la primera línea de un bloque para que puedas medir la entrada del párrafo.<br>
  Esta línea aparece después de un salto forzado y permite comprobar el efecto de each-line.<br>
  Con hanging activado se invierte la lógica: las líneas posteriores reciben la sangría y la primera queda al borde.
</p>

CSS

.text-indent-sample {
  max-inline-size: 36rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-indent: 2rem;
}