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
overflowis other thanvisible. (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
:beforepseudo-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.
Browser Support
The list-style-position property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
