CHAPTER 12 ■ ALIGNING CONTENTText Indent
Problem You want to indent the first line of a terminal block element, such as a paragraph.^
Solution You can use a positive value in text-indent to indent the first line of text.
Pattern^
HTML
CSS
.text-indent { text-indent:+VALUE; }
Location text-indent works only on terminal block elements. It does not work on structural block
elements or inline elements. By default, text-indent is inherited by child elements. This
means you can assign text-indent to a structural block element, and all descendant
terminal block elements will inherit the value you assigned to text-indent.
Furthermore, this design pattern works only on content. If an element contains no content,
there is nothing to indent, and this property will have no visual impact. Even though the
name of the property is text-indent, it indents all content, regardless of whether it is text.
Tip Normally you want indentation and margins to be consistent. All major browsers set the
indents of their list items at 40 pixels.
Variation You could create a first-line indent using first-letter to select the first letter of a terminal
block element and then style it with a positive margin-left. This is more work and is less
reliable than text-indent.
Related to Hanging Indent; Invisible Text (Chapter 10); Blocked, Spacing (Chapter 11); First-Letter
Dropcap, Hanging Dropcap (Chapter 18); Hanging Alert (Chapter 20)