1. css
  2. /properties
  3. /list-style-position

list-style-position

Definition

The list-style-position property sets the position of the marker for a list item. It determines whether the marker appears inside or outside the content box of the list item.

Examples

Setting list-style-position to outside:

ul {
  list-style-position: outside;
}

Setting list-style-position to inside:

ol {
  list-style-position: inside;
}

Values

ValueDescription
insideSets the marker to appear inside the content box of the list item.
outsideSets the marker to appear outside the content box of the list item.
inheritInherits the value of list-style-position from the parent element.

Best Practices

  • Use the default value of outside unless you have a specific reason to place the marker inside the content box of the list item.
  • Consider using inside for lists with long or complex content, as it can help improve the visual alignment of the list items.
  • Test the appearance of your list with different values of list-style-position to ensure that it looks good across different devices and browsers.
  • Use consistent values of list-style-position throughout a document to maintain visual consistency.
  • Keep in mind that changing the value of list-style-position can affect the layout of your document, particularly if you have nested lists or custom CSS styles that depend on the position of the marker.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes