CSS list-style-position Property

What You’ll Learn

The list-style-position property controls whether list markers appear inside or outside the list item content box. It affects how bullets, numbers, and wrapped text align.

Introduction

The list-style-position property in CSS is used to specify the position of the list-item marker (such as a bullet or number) in relation to the list item’s content. It primarily applies to <ul> (unordered lists), <ol> (ordered lists), and <li> (list items).

By adjusting this property, you can control whether the marker is placed inside or outside the list item’s content box, allowing for more flexible styling of lists.

Definition and Usage

Apply list-style-position on ul, ol, or individual li elements. For most content lists with wrapping text, outside is the better default. Use inside when you want markers to sit flush with the content edge.

📝 Syntax

The syntax for the list-style-position property is as follows:

selector {
  list-style-position: value;
}

The value can be either inside or outside.

Basic Example

ul.inside-list {
  list-style-position: inside;
}

Syntax Rules

• Only two keyword values are valid: inside and outside.
• The property is inherited by list items.
• Works with bullets, numbers, and image markers.
• Often combined with list-style-type or the list-style shorthand.

💎 Property Values

🎯 Default Value

The default value of the list-style-position property is outside. This means the marker is placed outside the list item’s content box by default.

Examples Gallery

Compare outside and inside on unordered lists, see wrapping behavior, style ordered lists, and combine with the list-style shorthand.

<style>
  .outside {
    list-style-position: outside;
  }
  .inside {
    list-style-position: inside;
  }
</style>

<h2>Outside (Default)</h2>
<ul class="outside">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<h2>Inside</h2>
<ul class="inside">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

.narrow-outside {
  max-width: 14rem;
  list-style-position: outside;
}

.narrow-inside {
  max-width: 14rem;
  list-style-position: inside;
}

ol.steps {
  list-style-position: inside;
  list-style-type: decimal;
}

ul.compact {
  list-style: square inside;
}

♿ Accessibility

• Keep semantic list markup — Marker position is visual; use real ul and ol elements.
• Prefer outside for long content — Wrapped text is easier to scan when lines hang under the text start.
• Do not hide meaning in marker styling alone — Important information belongs in the list item text.
• Screen readers ignore marker position — They still announce list length and item content correctly.
• Maintain enough spacing — Inside markers can feel cramped on dense multi-line items.

💡 Best Practices