CSS Reference Property

list-style-position

The list-style-position property is used to specify the position of markers (bullets or images used as markers) of a list item with respect to the item’s principal block box.

That is, it defines whether the markers should be positioned inside the element’s box or outside of it.

The list style is applied to list items and elements that have <a href="http://tympanus.net/codrops/css_reference/display">display</a>: list-item, and therefore the position of the list style specifies the position of the marker inside any of these boxes.

Official Syntax

  • Syntax:

    list-style-position: inside | outside | inherit
  • Initial: outside
  • Applies To: elements with display: list-item
  • Animatable: no

Values

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

The marker box is fixed with respect to the principal block box’s border and does not scroll with the principal block box’s content. In CSS 2.1, a browser may hide the marker if the element’s overflow is other than visible. (This is expected to change in the future.)

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.
inherit
The list item inherits its marker position from its parent.

Examples

ul {
  list-style-position: inside;  
}
                

The following sets an image as a list marker using the list-style-image property. property, and sets the position of that image inside the block box of the items.

ul {
    list-style-image: url(images/arrow.png);
    list-style-position: inside;
}
                

The following sets the marker image using the list-style shorthand property, leaving the list-style-position unset, which will default to the value outside.

ul {
    list-style: url(images/arrow.png);
}
                

Live Demo

The list items in the following demo have a light gray background to highlight the boundaries of their principal block box. The first example shows the default markers position (outside), and the second one shows the markers positioned inside the list items’ box using list-style-position. The third and fourth examples show the same positions but using an image as a marker, that is applied using the list-style-image property.

View this demo on the Codrops Playground

Browser Support

The list-style-position property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Written by . Last updated February 4, 2015 at 3:36 pm by Manoela Ilic.

Do you have a suggestion, question or want to contribute? Submit an issue.