text-indent (CSS property)

Spec
Inherited Initial Version
Yes CSS1, 2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

text-indent: { length | percentage | inherit } ;

Description

This property specifies the indentation of the first line of text in a block. Whether the text is indented from the left or from the right depends on the element’s direction property.

Whereas margins and padding affect the whole block, text-indent only applies to the first rendered line of text in the element.

Tip: Using text-indent to Hide Text

Setting text-indent to a large negative value is a technique commonly used to “hide” short texts—such as structural headings—in visual browsers without hiding them from screen readers (as is the case with display:none). For example, a text-indent value of -9999px is high enough to push the text far off the screen—even for large viewport sizes. Beware of extreme vales as there may be implementation specific limits.

Example

These rules style paragraphs in a way that’s common in novels—there’s no vertical space between the paragraphs, and each paragraph except the first is indented 1.5 em squares:

p {
  margin: 0;
  text-indent: 1.5em;
}
p:first-child {
  text-indent: 0;
}

Value

Negative values are legal.

A length specifies an indentation of a fixed length.

A percentage specifies an indentation that’s a percentage of the containing block’s width.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

Internet Explorer for Windows versions up to and including 5.5 will indent text in inline elements that have been assigned a width value other than auto.

Internet Explorer for Windows versions up to and including 7 don’t support the value inherit.

Opera browsers will ignore “extreme” values. So, when you’re using text-indent to hide text, don’t go beyond -999em or -9999px.

Firefox up to and including version 3.5 will draw a specified outline (or the default :focus outline) around content that has been hidden off-screen with a negative text-indent value. Addingoverflow:hidden to the element will limit the effect to the visible portion of the element only.

User-contributed notes

Related Products