The list-style-position CSS property is used to control the position of the marker or bullet in a list item. It determines whether the marker should appear inside or outside the content flow of the list item.
The list-style-position property accepts two values:
-
inside: The marker or bullet is placed inside the content box of the list item. It is positioned as part of the text flow, and the text wraps around it. -
outside: The marker or bullet is placed outside the content box of the list item. It is positioned to the left of the text, and the text does not wrap around it.
Here’s an example:
ul {
list-style-position: inside;
}
In this example, the list-style-position: inside; rule sets the marker for unordered lists (<ul>) to appear inside the content box of each list item. The text within the list item will wrap around the marker.
Conversely, using the list-style-position property with the value of outside will position the marker outside the content box of the list item:
ol {
list-style-position: outside;
}
In this case, the list-style-position: outside; rule places the markers for ordered lists (<ol>) outside the content box of each list item. The text within the list item will not wrap around the marker.
The list-style-position property provides flexibility in controlling the positioning of list markers. You can choose the appropriate value based on your design preferences and the desired visual layout of the list.