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 Value0
InheritedYes
Applies Toblock
Animation Typelength
CSS VersionCSS1
StatusStandard

📝 Syntax

text-indent: <length> | <percentage>;

⚙️ Values

ValueTypeDescription
<length>TypeA fixed first-line indentation
<percentage>TypeA percentage of the containing block's width

▶ Example

Edit the code below and see the live result in the playground:

🌐 Browser Support

Browser ChromeChrome EdgeEdge FirefoxFirefox SafariSafari OperaOpera
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.

📚 Related Tutorials

Web-Tutorial.com

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站,几个人的小团队,精力有限。页面虽经检查,难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏