Typography
text-indent
Offset the first formatted line without moving the rest of the paragraph.
Overview
| Class | Declarations |
|---|---|
text-indent:<offset> | text-indent: <offset>;
|
Examples
Indent the first line
text-indent:2em offsets only the first formatted line. At this example’s 16px font size, that is 32px; later lines keep the original starting edge.
Indent the first line
Follow the first line’s starting edge. Later lines retain their normal position inside the same paragraph.
<!-- text-indent:0 --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-indent:0">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p><!-- text-indent:2em --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-indent:2em">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Generated CSS
@layer utilities { .text-indent\:2em { text-indent: 2em }}Use spacing values
Use a shared spacing value when the indent should follow the interface scale. Here text-indent-md resolves to the preset’s 1rem spacing token.
Use spacing values
Follow the first line’s starting edge. Later lines retain their normal position inside the same paragraph.
<!-- text-indent-md --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-indent-md">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Reset at a breakpoint
Reset the first-line indent when the viewport reaches sm. The paragraph keeps a fixed reading measure so only the indentation changes.
Reset at a breakpoint
Follow the first line’s starting edge. Later lines retain their normal position inside the same paragraph.
<!-- 32px indent · reset at sm --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-indent:2em text-indent:0@sm">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Apply conditionally
This example adds a 1rem indent at sm on screen and restores zero indentation in print. Resize the preview or open its print preview.
Apply conditionally
Follow the first line’s starting edge. Later lines retain their normal position inside the same paragraph.
<!-- Screen indent · print reset --><p id="target" class="w:240px max-w:100% m:0 font-md leading:24px text-indent:0 text-indent:0@print text-indent-md@screen@sm">A clear reading rhythm gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>Margin moves the block and padding insets all its lines. Neither is equivalent to a first-line indent.