| Inherited | Initial | Version |
|---|---|---|
| Yes | CSS1, 2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| 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.
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 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| 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.
User-contributed notes
- ID:
- #2
- Date:
- Mon, 08 Jun 2009 00:48:32 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
Tyssen, that can be fixed by using overflow:hidden
- 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.