Recipe 5.9. 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 5-16.

Figure 5-16. 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 may 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 text-indent value further, or by increasing the font size of the text in the list item.

See Also

Recipe 2.18 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.