Definition and Usage
The list-style-position CSS property specifies the position of the marker box in the principal block box. It is often more convenient to use the shortcut list-style.
- Initialoutside
- Applies tolist items
- Inheritedyes
- Mediavisual
- Computed Valueas specified
- Animatableno
- Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: inside | outside
list-style-position: inside list-style-position: outside list-style-position: inherit
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.
Examples
01 | .one { |
02 | list-style:url(starsolid.gif) inside; |
03 | } |
04 | .two { |
05 | list-style-position: outside; |
06 | list-style-type: circle; |
07 | } |
08 | .three { |
09 | list-style-image: url(starsolid.gif); |
10 | list-style-position: none; |
11 | } |
Compatibility
Desktop browsers
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.0) | 4.0 | 3.5 | 1.0 (85) |
Mobile browsers
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | NA | NA | NA | NA | NA |
