| Inherited | Initial | Version |
|---|---|---|
| Yes | CSS1, 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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.
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.
