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

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