CSS/Properties/list-style-position

From W3C Wiki
Jump to: navigation, search

list-style-position

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

Description

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


Values

  • 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

Example A

[style.css]

 #in{
   list-style-type: circle;
   list-style-position: inside;
 }
 #out{
   list-style-type: square;
   list-style-position: outside;
 } 

[index.html]

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


Csslist2 list-style-position.png

CSS Reference

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