CSS list-style-position Property

Markers are the bullets on a list with items.

The list-style-position property specifies a marker position.

They can be displayed inside or outside the list items.

Example

#

A list with list-style-position set to outside.

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
<ul style="list-style-position: outside">
  <li>Vincent Van Gogh</li>
  <li>Henri Matisse</li>
  <li>Paul Gauguin</li>
</ul>

Syntax

list-style-position: inside | outside | initial | inherit;

Values

#

Value Description
inside Markers display inside the list items.
outside Default. Markers display outside (further to the left).
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different list-style-position values.

  • Vincent Van Gogh
  • Henri Matisse
  • Paul Gauguin
<style>
  .list-style-position-example {
    list-style-position: inside;
  }
</style>

<ul class="list-style-position-example">
  <li>Vincent Van Gogh</li>
  <li>Henri Matisse</li>
  <li>Paul Gauguin</li>
</ul>  

Browser support

This table shows when list-style-position support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides