Home CSS Properties list-style-position CSS list-style-position Property Definition
Definition and Usage The list-style-position property sets where the list marker (::marker) sits relative to the list item: inside the content or outside the principal block box.
It applies to list items (li and display: list-item) and is inherited. The default is outside. Prefer the list-style
Baseline widely available. Not deprecated. inside and outside are safe everywhere. Wrapping looks different with inside — that is expected, not a bug.
Syntax
CSS Syntax list-style-position: inside | outside | initial | inherit ;
Examples: list-style-position: outside; · list-style-position: inside;
Values
Property Values Value Description Try it outsideMarker outside the content box (default) insideMarker inside the content flow inside + wrapSee how wrapped lines align under the marker type + position Square marker with inside initialResets to outside inheritTakes the parent’s position
Approach
How to Use list-style-position Pick where the marker lives relative to the text.
Select a ul or ol. Set list-style-position to outside (classic) or inside (compact). Test with a long item so wrapping makes the difference clear. Combine with list-style-type Value When to use Wrap behavior outsideDefault lists, hanging markers Next lines align under the text insideTighter layouts, less side padding Next lines continue under the marker
Try it
Live Preview Only list-style-position changes. A long item shows how wrapping differs.
Code
CSS Examples Each snippet focuses on list-style-position. Use Try It Yourself for a live editor.
1. outside 2. inside 3. Wrap compare Example 1 — Outside (Default) Keep the classic hanging marker beside the content.
<style>
ul {
list-style-type: square;
list-style-position: outside;
}
</style>
<ul>
<li>Apollo</li>
<li>Hubble</li>
</ul> How It Works Default position. outside is the initial value for list markers.Beside the box. The marker sits outside the principal content box.Needs indent. Lists usually keep left padding so the marker has room.Type is separate. square only changes the marker shape.Example 2 — Inside Pull the marker into the content flow.
<style>
ul {
list-style-type: square;
list-style-position: inside;
}
</style>
<ul>
<li>Apollo</li>
<li>Hubble</li>
</ul> How It Works In the flow. The marker is the first piece of the item’s contents.Less side space. You can often reduce left padding for a tighter list.Same type. Position does not change whether you use disc, square, or decimal.Inherited. Nested items get inside unless they override it.Example 3 — Wrapping Difference Use a narrow list so wrapped lines show the real difference.
<style>
ul {
list-style-type: square;
list-style-position: inside;
max-width: 14rem;
}
</style>
<ul>
<li>Short item</li>
<li>A longer item that wraps under the marker when space is tight.</li>
</ul> Short item A longer item that wraps under the marker when space is tight. How It Works Force a wrap. A narrow width makes the second line visible.Inside align. Wrapped text continues under the marker.Outside contrast. With outside, wrapped lines would align under the text start.Study tip. Flip to outside in Try It Yourself to compare.Edge Cases & Pitfalls Position looks subtle until wrapping or padding gets involved.
wrap Wrapping is the real difference On one short line, inside and outside can look similar. Test with a long item.
padding outside needs indentIf you set padding-left: 0 with outside, markers can clip or sit off-screen. Keep space for them.
shorthand list-style can reset positionA later list-style: square sets position back to outside. Include position in the shorthand or set it after.
block First child as a block With inside, if the first child is a block, it can move to the line after the marker. Prefer simple text or inline content for study.
display Needs list items Markers apply to list items. A plain div needs display: list-item
Compatibility
Browser Support list-style-position is a browser CSS property for list markers. Node.js, Deno, and Bun do not apply it.
✓ Baseline · Widely available
list-style-position inside and outside are widely supported across modern and legacy browsers.
Google Chrome All versions
Full support
Mozilla Firefox All versions
Full support
Apple Safari All versions
Full support
Microsoft Edge All versions
Full support
Opera All versions
Full support
Samsung Internet All versions
Full support
Internet Explorer All versions
Full support list-style-position Widely supported
Bottom line: Safe for everyday list layout. Prefer outside for classic lists; use inside when you want a tighter flow. It is not a runtime API.
Remember
Key Takeaways Role: places the marker inside or outside the content box.
Default: outside — hanging marker beside the text.
inside: marker in the flow; wrapped lines sit under it.
Padding: keep indent for outside markers.
One line: list-style-position chooses whether the bullet hangs outside or sits in the text flow.
Frequently Asked Questions What does the CSS list-style-position property do? It sets whether the list marker (::marker) sits inside the list item's content or outside the principal block box.
What is the default value of list-style-position? The default is outside. The marker hangs beside the content box, usually in the padding/margin area.
What is the difference between inside and outside? outside keeps wrapped lines aligned under the text. inside puts the marker in the content flow, so wrapped lines continue under the marker.
Does list-style-position work on ol and ul? Yes. It applies to list items on both unordered and ordered lists.
Is list-style-position inherited? Yes. Set it on ul or ol and items inherit it unless a nested list overrides it.
Which browsers support list-style-position? It is Baseline and widely available. It is a browser CSS property, not a Node.js or other runtime feature.
About the author Developer, cloud engineer, and technical writer
I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.
8 people found this page helpful
