list-style-position

list-style-position places a marker inside the item’s content flow or outside its principal box. Outside follows the inline-start side, which is not always the physical left.

Compare wrapped item alignment

With outside, wrapped lines align with the start of the text. With inside, the marker occupies the first line and later lines return to the content-box start.

<ul class="outside">
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ul>
<ul class="inside">
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ul>

ul {
  width: 24ch;
  max-width: 100%;
}
li {
  border: 1px solid #94a3b8;
  margin-block: 0.75rem;
}
.outside {
  list-style-position: outside;
}
.inside {
  list-style-position: inside;
}

Leave room for outside markers

Logical padding reserves space at inline-start. The list can change direction without a hard-coded left-padding assumption.

<ul>
  <li>Read the smallest working document.</li>
  <li>Change one value and compare the result.</li>
  <li>Explain the difference before adding more styles.</li>
</ul>

ul {
  list-style-position: outside;
  padding-inline-start: 2rem;
}
li {
  margin-block: 0.5rem;
}

Values and defaults

The initial value is outside and the property is inherited. Inside puts the marker at the start of the item’s contents; outside places it outside the principal block box. It applies to display:list-item boxes and commonly inherits from ul or ol.

Common mistakes

An inside item beginning with a block element can place that block on the line after the marker. Zero padding can leave outside markers beyond a clipped container. Position is not arbitrary x/y placement and does not set marker size. A later list-style shorthand resets it.

Learn list-style, padding, and direction.

Sources and browser support

MDN: list-style-position describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.