CSS list-style-position attribute

Definition and Usage

The listStylePosition property sets where the list item markers are placed.

Description

This property is used to declare the position of the list marker relative to the content of the list item. External (outside) markers are placed at a certain distance from the boundary of the list item border, but this distance is not defined in CSS. Internal (inside) markers are treated as if they are inserted as inline elements at the very beginning of the list item content.

See Also:

CSS Tutorial:CSS List

CSS Reference Manual:CSS list-style attribute

HTML DOM Reference Manual:listStylePosition Property

Examples

Specifies the position of the list item markers in the list:

ul
  {
  list-style-position:inside;
  }

Try It Yourself

CSS Syntax

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

Property Value

Value Description
inside The list item markers are placed inside the text, and the wrapping text is aligned according to the markers.
outside Default Value. Keep the marker on the left side of the text. The list item markers are placed outside the text, and the wrapping text is not aligned according to the markers.
inherit Specifies that the value of the list-style-position property should be inherited from the parent element.

Technical Details

Default Value: outside
Inheritance: yes
Version: CSS1
JavaScript Syntax: object.style.listStylePosition="inside"

More Examples

Placing List Markers
This example demonstrates where to place the list marker.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5