HTML and CSS Reference
In-Depth Information
When setting the
list-style-type
property, don't forget to account
for the behavior of nested lists. By default, browsers set different types
so that bullets or numbering types change based on nesting helping readability.
Set different types for the selector
ul
, the selector
ul
ul
, and the selector
ul
ul
ul
.
list-style-image
The
list-style-image
property takes a
<uri>
for an image that
when specified replaces the generated list marker defined by the
list-style-type
property.
list-style-position
The
list-style-position
property defines where in relation to the
list item's box the list marker is positioned. Typically a marker will be
positioned outside the content area of the item out into the left gutter;
however, it can also be positioned inside of the list item, behaving as an
inline element at the beginning of the item would.
■
outside
: The list marker acts an inline element positioned outside the
box generated by the item's contents (default).
■
inside
: The list marker is positioned inside the list item's box.
Figure 10.1
demonstrates the two possible
list-style-position
values.
Figure 10.1
Three list items
with markers
positioned
outside, with
the latter three
positioned inside.
