CSS text-indent Property

What You’ll Learn

The text-indent property indents the first line of text in a block element — using length or percentage values.

Introduction

The text-indent property in CSS is used to specify the indentation of the first line of text in a block-level element.

This property allows you to create a visual distinction at the beginning of a paragraph or other block of text, enhancing the readability and visual appeal of your content.

Definition and Usage

Use text-indent on block elements such as <p>, <div>, or <article> when you want only the first line pushed inward. Other lines in the same block stay aligned with the left edge.

📝 Syntax

The syntax for the text-indent property is simple and can be applied to any block-level element containing text:

element {
  text-indent: length | percentage;
}

Basic Example

p {
  text-indent: 50px;
}

Syntax Rules

• Only the first line of the block is indented.
• Use length values like 50px, 2em, or 1rem.
• Percentage values are relative to the containing block’s width.
• Negative values pull the first line left for hanging indent layouts.

Related Properties

• padding-left — indents the entire block, not just the first line
• margin-left — shifts the whole element inward
• text-align — controls horizontal alignment of all lines

🎯 Default Value

The default value of the text-indent property is 0, which means no indentation.

💎 Property Values

The text-indent property accepts length and percentage values.

When to Use text-indent

text-indent is the right choice when you want traditional paragraph styling or special first-line layouts:

• Articles and blogs — Indent the first line of each paragraph for a book-like reading experience.
• Quotes and citations — Use a small indent to set quoted text apart.
• Lists with long text — Create hanging indents with negative values and padding.
• Responsive content — Use em or % so indents scale with layout.

Examples Gallery

In this example, we’ll indent the first line of a paragraph by 50 pixels, then explore more indentation patterns.

<style>
  p {
    text-indent: 50px;
  }
</style>

<h1>Paragraph with Custom Text Indentation</h1>
<p>
  This is an example paragraph. The first line of this paragraph is indented by 50 pixels.
  The text-indent property can be used to create a visual separation between paragraphs,
  making the content easier to read.
</p>

.article-body p {
  text-indent: 5%;
  line-height: 1.7;
}

article p {
  text-indent: 2em;
  font-size: 1.125rem;
}

.citation {
  padding-left: 2em;
  text-indent: -2em;
}

♿ Accessibility

• Keep indents moderate — Very large indents can make text harder to scan, especially on mobile.
• Do not rely on indent alone — Use headings and spacing to structure content for all readers.
• Test on small screens — Percentage and pixel indents may feel too wide on narrow viewports.
• Maintain line length — Pair indents with comfortable line-height for readability.

text-indent vs padding and margin

text-indent affects only the first line. Use padding-left when the entire block should move inward, or combine both for hanging indent effects.

/* First line only */
p { text-indent: 2em; }

/* Entire block */
blockquote { padding-left: 1.5rem; }

💡 Best Practices