List style position
Learn marker position with list-style-position.
Where does the marker fall?
A list marker can sit outside or inside the text. The list-style-position property decides this. The default value outside keeps the marker to the left, outside the text.
inside puts the marker inside the text. The difference shows up on wrapped items: outside aligns the second line to the right of the marker, while inside keeps it flush.
Why is outside common?
Most of the time you keep the default outside. The marker sits to the left of the text; on wrapped items the second line aligns to the right of the marker. This is the familiar look of bulleted lists.
inside works for tighter, heading-like lists. For example, in short definition lists, keeping the marker close to the text aids readability.
Exercise Tighten the guide list
Write a ul.guide class selector and assign list-style-position: inside. The guide list markers will then sit inside the text.
Show example solution
/* tighten the guide list */
ul.guide {
list-style-position: inside;
}Test yourself
-
What does list-style-position: inside do?
ul { list-style-position: inside; }- Puts the marker outside, to the left (default)
- Puts the marker inside the text; wrapped lines stay flush
- Removes the markers entirely
- Pushes the markers to the right
Show answer
Puts the marker inside the text; wrapped lines stay flush — Correct. inside places the marker inside the text and keeps wrapped lines flush.
-
Pull the marker inside
ul.guide { ____; }Show answer
ul.guide { list-style-position: inside; } -
Match each position to its behavior
- outside
- Marker outside text (default)
- inside
- Marker inside text
- inherit
- Takes the parent's value