Definition
The text-indent
CSS property is used to specify the indentation of the first line of text within a block-level element. It allows you to control the horizontal positioning of the first line, creating an indentation effect.
The text-indent
property accepts various values:
- A length value, such as
px
orem
, specifies a fixed measurement for the indentation. Positive values move the first line to the right, while negative values move it to the left. - A percentage value, such as
%
, is relative to the width of the containing block. Positive values move the first line to the right, while negative values move it to the left. - The
inherit
keyword, which specifies that the value should be inherited from the parent element.
Here’s an example:
.indented-text {
text-indent: 2em;
}
In this example, the .indented-text
class sets the text-indent
property to 2em
, causing the first line of text within the element to be indented by 2 times the size of the current font.
It’s important to note that the text-indent
property only affects the first line of the element’s content. Subsequent lines will not be affected unless you use additional CSS techniques or properties to control the indentation for multiple lines.
The text-indent
property is commonly used for creating hanging indents in paragraphs, where the first line is indented but subsequent lines are aligned to the left margin. It can also be used to create other indentation effects for different text elements as needed.
Keep in mind that text-indent
may have unintended consequences for certain elements like headings or list items, where it may conflict with the default styling or structure. It’s important to use it judiciously and consider the impact on readability and design when applying indentation to different elements.
Syntax
p + p {
text-indent: 1.5em;
}
Values
-
<length>
: indent size usingem
,rem
,px
, etc. -
<percentage>
: relative to the element’s width. -
each-line
: indent each wrapped line in addition to the first line. -
hanging
: reverse indentation to create hanging indents for lists/bibliographies.
Practical Examples
article p + p {
text-indent: 1.75em;
}
First-line indents help differentiate paragraphs in long-form typography.
Design systems balance consistency with flexibility, letting teams ship features faster.
Applying text-indent
to subsequent paragraphs creates a classic editorial rhythm.
<article class="space-y-4 rounded-xl border border-slate-200 bg-white p-6 shadow-sm text-slate-700">
<p>Design systems balance consistency with flexibility, letting teams ship features faster.</p>
<p style="text-indent: 1.75em;">Applying <code>text-indent</code> to subsequent paragraphs creates a classic editorial rhythm.</p>
</article>
Tips & Best Practices
- Combine with
p + p
selectors to avoid indenting the first paragraph of a section. - Use
hanging
with ordered lists or references to align numbers on the left. - Keep indents proportional (
em
units) so they scale with type size.
Accessibility & UX Notes
Maintain adequate leading so indented lines remain readable; avoid over-indent on narrow screens.
Browser Support
Widely supported. The each-line
and hanging
keywords require modern browsers (Safari 15+, Chrome 110+, Firefox 72+).
Related
-
line-height
for paragraph rhythm. -
margin-block-start
to separate sections. -
text-align
for additional paragraph control.