TIPS - CSS: Professional Techniques for Modern Layout - page 90

Or perhaps all margins, no padding is your cup of tea:
ul , ol { margin-left : 2.5em ; padding-left : 0 ;}
In many cases, it won't really matter how you do this. If you assign a background to your lists,
though, then it very suddenly does matter (see Figure 3-14). h is is largely because the list
markers—bullets, squares, letters, numbers, whatever—are placed to one side of each list item,
as though absolutely positioned there. (h ey aren't actually placed using absolute positioning,
but the ef ect is very, very similar.) So they'll hand over the list's let padding or margin or
whatever is over there. If you want them “inside” the visible background, then you want your
list indentation to be done with padding. If you want them hanging out beyond the back-
ground, then use margin.
92
Figure 3-14: A comparison of list indentation techniques.
OUTDENTING LISTS
We were just talking about list indentation, and now we're talking about … outdentation? Is
that even a word? Maybe not, but it's better than “hanging indent,” which is the other term
used for this sort of thing and which makes no sense at all.
What we're talking about here is the technique of having the i rst line of a list item hanging
out to the let of where the rest sit (see Figure 3-15).
It's a nice ef ect because it lets you distinguish between list items without having to clutter up
the page with bullets or what-have-you. It's really easy to do, too.
ul { text-indent : -2em ; list-style : none ;}