List Marker Position Property
Last updated: 2026-09-13
list-style-position List Marker Position Property
list-style-position controls whether the list marker sits inside or outside the list item's content block. The default outside places the marker outside the content block so the first line of text aligns cleanly; inside pulls the marker into the content block so text wraps around it. It affects the list's flow and indentation.
| Category | |
|---|---|
| Initial Value | outside |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS1 |
| Status | Standard |
📝 Syntax
list-style-position: outside | inside;⚙️ Values
| Value | Type | Description |
|---|---|---|
outside | inside | Keyword | Marker position |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| list-style-position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Tip： outside is the default and keeps subsequent lines aligned with the first; inside suits short text and makes marker and text visually compact.
❓ FAQ
QHow do outside and inside affect list layout?
Aoutside (the default): the marker sits outside the li content block, so the text block is left-aligned as a whole, all lines line up, and the marker keeps its standard gap from the text. inside: the marker sits inside the content block, so the first line is pushed in and subsequent lines align under the marker. outside fits multi-line long text; inside looks more compact.
QWhy does text look neater with outside?
ABecause in outside mode the marker takes no width from the content block, the text block is a clean rectangle whose left edges align on every line. In inside mode the first line is indented by the marker, so the first line no longer aligns with the following lines. For multi-line lists, keep the default outside so every line aligns.
QHow do I vertically center list markers with the text?
Alist-style-position cannot fine-tune marker alignment. The usual approach: list-style: none to remove the marker, li::before inserting content: "•" (or an icon), and flex with align-items: center to center the marker against the text, then control the spacing uniformly.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
