list-style-position

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Thelist-style-positionCSS property sets the position of the::marker relative to a list item.

Try it

list-style-position: inside;

list-style-position: outside;

<section>  <div>    <p>NASA Notable Missions</p>    <ul>      <li>Apollo 11: First Human Landing</li>      <li>City in Space: The International Space Station</li>      <li>Great Observatory: The Hubble Space Telescope</li>      <li>Everlasting Mars Rovers</li>    </ul>  </div></section>

.default-example {  font-size: 1.2rem;}#example-element {  width: 100%;  background: #be094b;  color: white;}section {  text-align: left;  flex-direction: column;}hr {  width: 50%;  color: lightgray;  margin: 0.5em;}.note {  font-size: 0.8rem;}.note a {  color: #009e5f;}@counter-style space-counter {  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";  suffix: " ";}

Syntax

css

/* Keyword values */list-style-position: inside;list-style-position: outside;/* Global values */list-style-position: inherit;list-style-position: initial;list-style-position: revert;list-style-position: revert-layer;list-style-position: unset;

Thelist-style-position property is specified as one of the keyword values listed below.

Values

inside: The::marker is the first element among the list item's contents.
outside: The::marker is outside the principal block box. This is the default value forlist-style.

This property is applied to list items, i.e., elements withdisplay: list-item;.By default this includes<li> elements. Because this property is inherited, it can be set on the parent element (normally<ol> or<ul>) to let it apply to all list items.

If a block element is the first child of a list element declared aslist-style-position: inside, then the block element is placed on the line after the marker-box.

It is often more convenient to use the shorthandlist-style.

Formal definition

Initial value	`outside`
Applies to	list items
Inherited	yes
Computed value	as specified
Animation type	discrete

Formal syntax

list-style-position =
inside|
outside

Examples

Setting list item position

HTML

html

<p>List 1</p><ul>  <li>List Item 1-1</li>  <li>List Item 1-2</li>  <li>List Item 1-3</li>  <li>List Item 1-4</li></ul><p>List 2</p><ul>  <li>List Item 2-1</li>  <li>List Item 2-2</li>  <li>List Item 2-3</li>  <li>List Item 2-4</li></ul><p>List 3</p><ul>  <li>List Item 3-1</li>  <li>List Item 3-2</li>  <li>List Item 3-3</li>  <li>List Item 3-4</li></ul>

CSS

css

.inside {  list-style-position: inside;  list-style-type: square;}.outside {  list-style-position: outside;  list-style-type: circle;}.inside-img {  list-style-position: inside;  list-style-image: url("star-solid.gif");}

Result

Specifications

Specification
CSS Lists and Counters Module Level 3 # list-style-position-property

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified onNov 7, 2025 byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換