CHAPTER 12 ■ ALIGNING CONTENTHanging Indent
Problem You want to insert a hanging indent on the first line in a terminal block element, such as a
paragraph.
Solution You can use a negative value in text-indent to extend the first line of text into the left
padding area of a terminal block element so that it hangs over the left side of the element.
You can use a positive value in padding-left to make room for the hanging indent.
Pattern^
HTML
CSS
.hanging-indent { text-indent:-VALUE; padding-left:+VALUE; }
Location text-indent works only on terminal block elements that contain content. It does not work
on structural block elements or inline elements. By default, text-indent is inherited by
child elements. You will notice the hanging indent only if the element contains more than
one line.
Advantages Because this design pattern uses padding-left to indent the block, the border surrounds
the entire block. If you use margin-left to indent the block, the negative indent will stick
outside of the border.
Disadvantages This design pattern does not apply to inline elements. You can use the Padded Content or
Inline Spacer design patterns to achieve this same effect using inline elements.
Tips A hanging indent is normally used to create list items. HTML provides the unordered list
- and the ordered list
- for this purpose.
Normally, you want indentation and margins to be consistent. The default indentation for a
list item is 40 pixels. You may also want to use –40 pixels for text-indent and 40 pixels for
padding-left.
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 negative margin-left. This is more work and is less
reliable than text-indent.
Related to Text Indent; Blocked, Spacing (Chapter 11); Hanging Dropcap (Chapter 18); Hanging Alert
(Chapter 20)