CSSlist-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 »list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
Definition and Usage
Thelist-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 aboutanimatable |
| 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 aboutinitial | |
| inherit | Inherits this property from its parent element.Read aboutinherit |
Related Pages
CSS tutorial:CSS List
CSS reference:list-style property
HTML DOM reference:listStylePosition property
