CSS list-style-position Property

Description

The CSS property list-style-position is used to control the positioning of list item markers (such as bullets or numbers) within an ordered or unordered list. It has two possible values: "inside" and "outside." When set to "outside" (the default), the list item markers are placed outside the content box of the list items. Conversely, when set to "inside," the markers are positioned inside the content box, allowing for tighter integration of the markers with the list items. This property provides flexibility in designing the layout and presentation of lists in web documents.

Initial value: outside
Applies to: List item elements
Inherited: Yes
Computed value: Specified value
Animatable: No
JavaScript syntax: object.style.listStylePosition

Interactive Demo

list-style-position: inside;

list-style-position: outside;

Australia
New Zealand
United States
United Kingdom
India

Syntax

list-style-position: inside | hanging | outside

Values

insideMarker is placed inside the text, and any wrapping text is aligned under the marker.
hangingAs inside, except the marker is instead placed immediately before the first text or significant whitespace in the list item or its children.
outsideMarker is placed outside the list item, and any wrapping text is not aligned under the marker.
inherit

Example

HTML

<ul class="test"> 

   <li>List Element</li> 

   <li>List Element</li> 

   <li>List Element</li> 

</ul> 

<ul class="test2"> 

   <li>List Element</li> 

   <li>List Element</li> 

   <li>List Element</li> 

</ul>

CSS

li {
   border: 1px solid orange;
}
.test {
   list-style-position: outside; 
   background: khaki; 
}
.test2 {
   list-style-position: inside;
   background: khaki; 
}

Result

Editor