text-indent: First-Line Indents and Hanging Paragraphs

CSS Reference

text-indent offsets the start of a block’s first formatted line. A positive value indents that line and a negative value outdents it; padding moves the content area for all lines.

Syntax and value choices

Property	Initial value	Inherited	Main application conditions
`text-indent`	0	Yes	First formatted lines in block containers

Initial values are not necessarily the values assigned to HTML elements by the browser’s stylesheet. Inspect the actual result in developer tools’ Computed panel.

.intro { text-indent: 2em; }
.hanging { padding-inline-start: 2em; text-indent: -2em; }

Value or category	Behavior and choice
`0`	No additional first-line indent.
`2em`	Offset the first line by twice the current font size.
`-2em`	Outdent the first line.
`10%`	Resolve against the containing block’s width.

For supported values and conditions, see MDN text-indent.

Run the example and compare results

Save this complete code as css-reference-10459-example.html in UTF-8 and open it in a browser. Keep its demonstration styles in that file rather than pasting them into a site-wide stylesheet.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-indent comparison example</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 260px; border: 1px solid #718096; padding: 12px; }
.target { text-indent: 2em; }
.reference { padding-inline-start: 2em; text-indent: -2em; }

/* Keep the practice box within a narrow viewport. */
.target { max-width: calc(100vw - 48px - 26px); }
.reference { max-width: calc(100vw - 48px - 2em - 14px); }
</style>
</head>
<body>
<main id="demo">
<h1>text-indent comparison</h1>
<section class="samples"><div class="a"><p class="label">Indent: 2em</p><div class="target">Compare the CSS result. This sample sentence demonstrates wrapping and the visible area.</div></div><div class="b"><p class="label">Hanging indent: -2em</p><div class="reference">Compare the CSS result. This sample sentence demonstrates wrapping and the visible area.</div></div></section>
</main>
</body>
</html>

The first sample indents only its first line. The hanging sample reserves start-side space and pulls its first line outward, so the later lines begin at a different position.

First-line placement versus the whole paragraph

Use text-indent for the first formatted line, and padding-inline-start when every line needs space. The property is inherited, so also inspect nested blocks instead of assuming the effect stays on one paragraph.

Outdenting and writing direction

Reserve enough space for a negative indent to avoid clipping or covering a neighbor. Logical padding is useful for content that must work in both left-to-right and right-to-left writing. Inspect the parent’s overflow if the outdented text disappears.

Change one setting at a time

Use the complete example file above. Change only the specified selector or value rather than several comparison conditions at once.

In the original file, change only .target’s text-indent through 0, 2em, and -2em. Compare the first and later lines without changing its padding.
For a real hanging paragraph, reserve start-side space as .reference does, then restore the original values. Inspect the text and box at 320px.

For a padding-only comparison, change only .reference’s text-indent to 0 in the original file. Keep its existing start padding: all lines then share the same start position. Restore -2em afterward.

For coordinated font sizing, line heights, and typeface choices, see CSS Fonts, Font Sizes, and Line Height. Related properties to compare alongside these conditions are text-align.

When the result is missing or unexpected

Apply it to the block holding the text rather than an isolated inline span.
Check start-side space and ancestor clipping when an outdent is cut off.

CSS Reference

CSS / Reference / font-variant: Small Capitals and Font Features

Use small capitals without changing the source string and choose specific variant longhands. Compare real font support with synthesized presentation.

CSS / Reference / calc(): Calculate CSS Values and Understand Their Types

Combine percentages and lengths with calc(), inspect the actual parent width, and distinguish invalid expressions from newer typed arithmetic and special numeric results.

CSS / Reference / letter-spacing, word-spacing: Compare Character and Word Spacing

Adjust character and word gaps independently using the same text and a normal baseline. Account for inheritance, language, wrapping, and excessive negative spacing.

CSS / Reference / empty-cells: Show or Hide Empty Table Cells

Control empty-cell borders and backgrounds in a separated table while preserving its structure. Compare show, hide, whitespace, and the collapsed-border exception.

CSS / Reference / text-indent: First-Line Indents and Hanging Paragraphs

Create first-line and hanging indents, distinguish them from paragraph padding, and check inheritance, writing direction, and narrow-screen clipping.