In this section, we will learn what the list-style-position property is and how to use it in CSS.

Click here to run the example of list-style-position property.

CSS list-style-position Property Definition and Usage

By default, the marker for each list-item sits outside the border of that list-item. But we can make this marker to sit within the border of its list-item.

Changing the position of a marker is done using CSS `list-style-position` property.

CSS list-style-position Property Syntax

list-style-position: inside|outside|initial|inherit;

CSS list-style-position Property Value

There are two values that we can assign to this property:

• inside: it means the marker should sit within the border of its list-item.
• outside: it means the marker should sit outside the border of its list-item.

The two global values, “initial” and “inherit” can also be used for this property.

Note: The default value for list-style-position is “outside”.

Example: list-style-position in CSS

See the Pen list-style-position in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.