CSS list-style-position Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The list-style-position property controls where a list marker (bullet, number, or image) is placed in relation to the list item's principal block box. It determines whether the marker is laid out as part of the list item’s inline content or whether it sits outside the main content area, visually detached from the first line. This property applies to elements that use the list-item display type, so it interacts with the element’s formatting context and layout behavior.

Conceptually there are two distinct placement behaviors: one places the marker within the flow of the list item so the marker participates in line layout and text wrapping, and the other places the marker outside the item’s main content area so it occupies reserved space (creating a hanging-mark effect) without becoming part of the inline line boxes. When the marker participates in the inline flow it can affect the first-line indentation, wrapping of the first line, and how selection/highlight interacts with the marker. When the marker is outside, the list item’s content box keeps its own alignment and the marker is positioned in the margin/offset area around that box. These interactions should be considered together with the list item’s padding and margin to achieve the intended visual alignment.

Because the marker is a separate visual item, its appearance still comes from the marker source (for example a glyph or an image) and from the list’s marker type settings; positioning simply changes where that rendered marker is placed. That means changes to the marker source will be reflected regardless of placement, and you may also style or target the marker with the ::marker pseudo-element for finer control. The property is often used together with the list’s marker style properties and the shorthand that controls them, so consider how marker placement combines with marker form to produce a readable and consistent list layout.

In practice, choose the placement behavior based on the visual and interaction goals: placing the marker inside can make the marker more integrated with text and easier to select or click as part of the line; placing it outside gives a cleaner hanging-indent alignment that often reads better for multi-line items and nested lists. Be mindful of nested lists, different marker sizes (or images), and responsive changes in available width - those factors will amplify how marker placement affects alignment, wrapping, and the overall rhythm of content.

Definition

Initial value: outside
Applies to: List item elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.listStylePosition

Interactive Demo

list-style-position: inside;

list-style-position: outside;

Australia
New Zealand
United States
United Kingdom
India

Syntax

list-style-position: inside | hanging | outside

Values

insideMarker is placed inside the text, and any wrapping text is aligned under the marker.
hangingAs inside, except the marker is instead placed immediately before the first text or significant whitespace in the list item or its children.
outsideMarker is placed outside the list item, and any wrapping text is not aligned under the marker.
inherit

Example

HTML

<div class='example'>

  <h2>list-style-position: outside</h2>

  <ul class='outside'>

    <li>Short item</li>

    <li>Long item that wraps to the next line so you can see how the bullet remains outside the content area when using outside position.</li>

    <li>Another item</li>

  </ul>



  <h2>list-style-position: inside</h2>

  <ul class='inside'>

    <li>Short item</li>

    <li>Long item that wraps to the next line so you can see how the bullet is placed inside the content flow when using inside position.</li>

    <li>Another item</li>

  </ul>

</div>

CSS

.example {
  max-width: 640px;
  margin: 24px;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  line-height: 1.5;
  color: #222;
}

h2 {
  font-size: 16px;
  margin: 16px 0 8px;
  font-weight: 600;
}

ul {
  margin: 0 0 24px 0;
  padding-left: 1.25rem; /* base left padding for visibility */
}

/* Demonstration: marker stays outside the content box */
ul.outside {
  list-style-type: disc;
  list-style-position: outside;
}

/* Demonstration: marker is placed inside the content flow and aligns with the first line */
ul.inside {
  list-style-type: disc;
  list-style-position: inside;
}

/* Slight visual aid so wrapped lines are noticeable */
li {
  background: linear-gradient(90deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.02) 100%);
  padding: 6px 8px;
  border-radius: 4px;
  margin: 6px 0;
}

/* Ensure long lines wrap to illustrate the difference */
.example {
  word-break: break-word;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS list-style-position property. Hover over a browser icon to see the version that first introduced support for this CSS property.