text-indent

Setting indentation of the first line.

Overview

Examples

Indent the first line

Use text-indent:* to offset the first formatted line of a block of text.

<p class="text-indent:2em">    The first line is indented while the rest of the paragraph follows the normal inline flow.</p>

@layer utilities {    .text-indent\:2em {        text-indent: 2em    }}

Use spacing values

Use a spacing or sizing value when the indent should align with the rest of the interface rhythm.

<p class="text-indent:6x">    This paragraph uses an indent tied to the shared scale.</p>

Reset at a breakpoint

Set the indent back to 0 when a layout changes or when print output should be more compact.

<p class="text-indent:6x text-indent:0@print">    ...</p>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="text-indent:0 text-indent:4x@sm text-indent:0@print">...</div>

Use margin or padding when the whole block should move; text-indent only affects the first formatted line.