UsableTypeTypography for the World Wide Web

style guide

Text Indent

This property is used to indent the first line of a block of text, often seen at the beginning of paragraphs in much printed and written material. The indent can be expressed using any length method such as px or em, or by a percentage of the width of the containing block. A negative value can be used to ‘pull’ the first line out of the main block of text.

p {text-indent:2em;}

The most common use for this technique is to indent the first line of a paragraph—as seen in this very paragraph—an effect that designers formerly produced by inserting a small transparent image before the beginning of the text to push the first word inwards. With the CSS text-indent property we have a much easier method of creating this effect.

Many designers use a large negative text-indent value when using image replacement techniques to remove small pieces of text such as titles off the page entirely. The advantage of this is that non CSS aware browsers can still read the title text. Another advantage is that many screen readers will still read the text, whereas they may not read it if it was declared display:none;.

text-indent
Values: <length> | <percentage> | inherit
Initial Value: 0
Applies to: block-level elements
Inherited: yes
Percentages: refer to width of containing block

Latest Links

Joe finds me patronising! Arsenalski Niet

To get in touch, please use the UT form below.

Name:
Email:
Message:

close