text-indent
En esta página
| Clase | Propiedades CSS |
|---|---|
indent-<number> |
text-indent: calc(var(--spacing) * <number>); |
-indent-<number> |
text-indent: calc(var(--spacing) * -<number>); |
indent-px |
text-indent: 1px; |
-indent-px |
text-indent: -1px; |
indent-(<custom-property>) |
text-indent: var(<custom-property>); |
indent-[<value>] |
text-indent: <value>; |
Examples#
Basic example#
Use indent-<number> utilities like indent-2 and indent-8 to set the amount of empty space (indentation) that's shown before text in a block:
{
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
}<!-- [!code classes:indent-8] -->
<p class="indent-8">So I started to walk into the water...</p>
Using negative values#
To use a negative text indent value, prefix the class name with a dash to convert it to a negative value:
{
So I started to walk into the water. I won't lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don't know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I was a marine biologist.
}<!-- [!code classes:-indent-8] -->
<p class="-indent-8">So I started to walk into the water...</p>