In a paragraph that spans two or more lines of text, a hanging indent causes all lines after the first to be indented. This is the opposite of a normal indent, where the first line of the paragraph is indented. A hanging indent is especially useful where the text is short, such as in a list of items.
Recently, I noticed that many of the items that appear on the side-bar of my website were hard to distinguish from one another. For example, in the menu of recent articles, long article titles gave a confusing appearance. It was hard to tell if a title was long, and thus wrapped to a second line, or if there were two separate titles one each per line. One solution to this problem of confusion is to add a hanging indent to all lists in the side-bar.
Cascading Style Sheets (CSS) provides an easy way to implement a hanging-indent. While there is no built-in hanging indent style, it is easily implement in lists with a combination of indent and padding specifications. The trick is to pad the list itself by a positive amount and then indent the list items by an equivalent but negative amount. For example, in my sidebar, I have padded all unordered lists by 1em (1 character width) and then indented all list items by -1em.
The CSS code looks something like this:
ul {
padding-left: 1em;
}
ul li {
text-indent: -1em;
}