How to Set Text-Indent in CSS: Simple Guide

Use the text-indent property in CSS to set the indentation of the first line of text in an element. You can specify the indent size using length units like px, em, or percentages. For example, text-indent: 20px; indents the first line by 20 pixels.

Syntax

The text-indent property sets how much the first line of text is indented inside an element.

• Value: length (px, em, rem, %, etc.) or negative length
• Positive value: moves the first line right (indents)
• Negative value: moves the first line left (outdents)
• Default: 0 (no indent)

css

text-indent: <length>;

Example

This example shows a paragraph with the first line indented by 2em, which is about two times the size of the current font.

css

html {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

p {
  text-indent: 2em;
  max-width: 400px;
  line-height: 1.5;
  margin: 20px;
}

Output

A paragraph of text where the first line starts with a visible indent about the width of two letters 'M'. The rest of the lines start at the normal left margin.

Common Pitfalls

Some common mistakes when using text-indent include:

• Using text-indent on inline elements like span which won't work because indentation applies to block containers.
• Forgetting that negative values pull the first line left, which can hide text if too large.
• Not considering responsive design: fixed pixel values may look too big or small on different screens.

Always apply text-indent to block elements like p, div, or section.

css

/* Wrong: text-indent on inline element */
span {
  text-indent: 20px; /* No effect */
}

/* Right: text-indent on block element */
p {
  text-indent: 20px;
}

Quick Reference

Property	Description	Example Values
text-indent	Sets indentation of first line of text	20px, 2em, 10%, -15px
Applies to	Block containers like p, div, section	p, div, section
Default value	No indentation	0
Negative values	Outdent first line to left	-10px
Units	Length units or percentage	px, em, rem, %

Key Takeaways

Use text-indent to control the first line indentation of block text elements.

Specify indentation size with length units like px, em, or percentages.

Avoid applying text-indent to inline elements like span.

Negative values move the first line left, positive values move it right.

Consider responsive units like em or rem for better scaling on different devices.