CSS list-style-position Property
The list-style-position property specifies whether the list markers are outside or inside the list item box.
Possible Values
- inside - the marker is displayed inside the list item box.
- outside - the marker is displayed outside the list item box - the initial value.
- inherit - the value is inherited from the parent element.
In HTML an <li> element generates two boxes - one for the list item marker and one for the list item associated with the marker.
The list-style-position property allows you to specify whether the marker is displayed inside or outside of the list item box.
Below are two lists showing the difference between the two values inside and outside. In the first list the position is set to outside and the second list has a value of inside with all other styles being the same.
- First List Item
- Second List Item
- Third List Item
- First List Item
- Second List Item
- Third List Item
As you can see the marker in the second list (inside) is vertically aligned with the start of the list item in the first list which has a value outside.