Recipe 4.6 Making Hanging Indents in a List

Problem

You want the first line of a list item to begin further to the left than the rest of the list, thereby creating a hanging indent as in Figure 4-7.

Figure 4-7. Hanging indents on a list

Solution

Use a negative value for the text-indent property:

ul {
 width: 30%;
 padding: 0 0 0.75em 0; 
 margin: 0; 
 list-style: none;
}
li {
 text-indent: -0.75em; 
 margin: 0.33em 0.5em 0.5em 1.5em;
}

Discussion

Although list markers (numeric, image, or text) help to call attention to the actual list, sometimes you might not want to add those kinds of design elements to a list. Instead of relying on markers to carry off the list design, use a hanging indent.

In this Solution, you indent the list by three-quarters of an em unit, creating a visible but almost subtle hanging indent effect. You can push this design technique from subtle to the foreground by reducing the negative value further, or by increasing the font size of the text in the list item.

See Also

Recipe 1.14 on setting indents in paragraphs; the CSS 2.1 specification for text-indent at http://www.w3.org/TR/CSS21/text.html#propdef-text-indent.