From W3C Wiki
Jump to: navigation, search


The list-style-position property specifies the position of the marker box with respect to the principal block box.


Values inside | outside | inherit
Initial value outside
Applies to elements with 'display: list-item'
Inherited Yes


  • inside
    The marker box is placed as the first inline box in the principal block box, before the element's content and before any :before pseudo-elements.

  • outside
    The marker box is outside the principal block box. This is default.

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


   list-style-type: circle;
   list-style-position: inside;
   list-style-type: square;
   list-style-position: outside;


  <ul id="in">
    <li>list-item 1</li>
    <li>list-item 2</li>
    <li>list-item 3</li>
  <ul id="out">
    <li>list-item 1</li>
    <li>list-item 2</li>
    <li>list-item 3</li>

Csslist2 list-style-position.png

CSS Reference

The CSS specification defines the list-style-position property in 12.5.1 Lists.