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

Next lesson: List style image

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies