First-line indent property
Last updated: 2026-09-13
text-indent First-line indent property
The text-indent CSS property sets the horizontal indentation of the first line of a block-level element, commonly used for paragraph first-line indentation. It only affects the first line. Values can be a fixed length (such as 2em) or a percentage of the containing block's width, and negative values create a hanging indent.
| Category | |
|---|---|
| Initial Value | 0 |
| Inherited | Yes |
| Applies To | block |
| Animation Type | length |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
text-indent: <length> | <percentage>;
⚙️ Values
| Value | Type | Description |
|---|---|---|
<length> | Type | A fixed first-line indentation |
<percentage> | Type | A percentage of the containing block's width |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser | |||||
|---|---|---|---|---|---|
| text-indent | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip: In Chinese typography, 2em is the standard for a two-character first-line indent; the em unit scales automatically with the font size.
Warning: text-indent only applies to block-level elements; inline elements like span are not indented.
❓ FAQ
QWhat width is the percentage value of text-indent relative to?
AIt is relative to the content width of the element's containing block (the parent), not its own width or font size. For example, with a 400px parent, text-indent: 10% indents the first line by 40px. The em unit, by contrast, is relative to the current element's font size.
QCan I combine text-indent with other indentation techniques?
AYes. text-indent only affects the first line, so pairing it with padding-left indents the whole paragraph; combining a negative value with padding-left creates a hanging indent where the first line protrudes to the left. The two techniques do not conflict.
QHow do I indent the first line of a paragraph by two characters?
AThe standard Chinese typography rule is text-indent: 2em. Because em is relative to the current font size, the indent follows the size automatically and always equals two character widths. Avoid fixed px values, which get out of proportion when the font size changes.