CSS list-style-position Property
Example
Specify the position of the list-item markers:
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Try it Yourself »
Definition and Usage
The list-style-position property specifies the position of the list-item markers
(bullet points).
list-style-position: outside; means that the bullet points will be outside
the list item. The start of each line of a list item will be aligned vertically:
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
list-style-position: inside; means that the bullet points will be inside
the list item. As it is part of the list item, it will be part of the text and
push the text at the start:
- Coffee - A brewed drink prepared from roasted coffee beans...
- Tea
- Coca-cola
| Default value: | outside |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS1 |
| JavaScript syntax: | object.style.listStylePosition="inside" Try it |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| list-style-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
CSS Syntax
list-style-position: inside|outside|initial|inherit;
Property Values
| Value | Description | Demo |
|---|---|---|
| inside | The bullet points will be inside the list item | Demo ❯ |
| outside | The bullet points will be outside the list item. This is default | Demo ❯ |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Related Pages
CSS tutorial: CSS List
CSS reference: list-style property
HTML DOM reference: listStylePosition property
