| Inherited | Initial | Version |
|---|---|---|
| Yes | outside |
CSS1 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
list-style-position: { inside | outside | inherit } ;
Description
This property specifies where the list marker is rendered with respect to the list item’s principal block box.
Example
This style rule makes the markers for
all items within the list with ID "compact" appear on
the inside:
#compact li {
list-style-position: inside;
}
Value
outside- The value
outsidecauses the list marker to be rendered outside the principal block box. Its precise location isn’t defined by the CSS2.1 specification. Contemporary browsers seem to render it approximately 1.5em to the left of the principal block box in a left-to-right environment, or 1.5em to the right of the principal block box in a right-to-left environment. Some browsers use padding on the list to make room for the marker box, while others use a margin. inside- The value
insidemakes the list marker the first inline box in the principal block box. Its exact location is not defined by the CSS2.1 specification. Note that when using the valueinsideshould text wrap to another line then a situation could occur on short lines where the list marker becomes detached from the text (as of course would any otherinlineelement).
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.