text-indent (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Inherited | Initial | Version |
|---|---|---|
| Yes | CSS1, 2 |
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;
}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.
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
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
| 9.5 | 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.
Related Reading
User-contributed notes
- ID:
- #1
- Date:
- Fri, 11 Jan 2008 13:12:49 GMT
Earlier versions of Firefox will draw an outline around anchors with negative text-indent so you'll see an outline stretching to the left edge of the window when an anchor receives focus.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
