CSS list-style-position

The list-style-position property in CSS is used to define whether the list item markers should appear inside or outside the content flow. By default, list item markers (bullets or numbers) are displayed outside the text flow of the list items. However, this property allows you to change their position.

The list-style-position property accepts two values:

  1. inside: This value places the marker inside the box of the list item, which means it will be displayed within the content flow.
  2. outside: This is the default value and it places the marker outside the box of the list item, which means it will be displayed outside the content flow.

Let's see an example to understand how the list-style-position property works:

Result:
  • Item 1
  • Item 2
  • Item 3

In the example above, we have applied the list-style-position: inside; property to the unordered list (ul). As a result, the list item markers are displayed inside the content flow of the list items.