CSS:list-style-position
From MDC
[edit] Summary
list-style-position specifies the position of the marker box in the principal block box.
- Initial value:
outside - Applies to: elements with 'display: list-item'
- Inherited: yes
- Percentages: N/A
- Media:
visual - Computed value: as specified
[edit] Syntax
list-style-position: inside | outside | inherit
[edit] Values
-
outside - The marker box is outside the principal block box.
-
inside - The marker box is the first inline box in the principal block box, after which the element's content flows.
[edit] Examples
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat.</li>
</ul>
With below styles:
li {
list-style-position: inside;
border: 1px solid #000; /* Border color helps to see the difference
between inside and outside */
}
Will display like this:
Above HTML with these styles:
li {
list-style-position: outside;
border: 1px solid #000; /* Border color helps to see the difference
between inside and outside */
}
Will display like this:
