Creating Lists - Learn to Code HTML and CSS: Develop and Style Websites - page 164

List Style Position Property
By default the list item marker is to the left of the content within the <li> element. This
list style positioning is described as outside , meaning all of the content will appear dir-
ectly to the right, outside of the list item marker. Using the list-style-position
property, we can change the default value of outside to inside or inherit .
The outside property value places the list item marker to the left of the <li> element
and doesn't allow any content to wrap below the list item marker. The inside property
value (which is rarely seen or used) places the list item marker in line with the first line of
the <li> element and allows other content to wrap below it as needed (see Figure 8.10 ).
HTML
1. <ul>
2. <li>Cupcakes...</li>
3. <li>Sprinkles...</li>
4. </ul>
CSS
Click here to view code image
1. ul {
2. list-style-position: inside;
3. }
Figure 8.10 An unordered list with a list-style-position property value of
inside
Shorthand List Style Property
The list style properties discussed thus far, list-style-type and list-style-po-
sition , can be combined into one shorthand list-style property value. When us-
ing the list-style property, we can use one or all list style property values at a time.
The order of these shorthand values should be list-style-type followed by list-
style-position .