Introduction

The list-style-position CSS property controls where the list marker (like bullets or numbers) appears relative to the list item. This helps you create well-organized and visually appealing lists, making it an essential part of your CSS toolkit.

Syntax

/* Keyword values */
list-style-position: inside;
list-style-position: outside;

/* Global values */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;

Values

Inside

When set to inside, the marker (like a bullet or number) becomes the first element within the list item’s content box. This affects the layout of the text.

Outside

When set to outside, the marker is positioned outside the principal block box of the list item. This is the default value, making the marker appear to the left of the list item’s content.

Inherit

The inherit value makes the list item inherit the list-style-position value from its parent element.

Initial

The initial value sets the property to its default value, which is outside.

Revert

The revert value resets the property to the value specified by the user agent’s default stylesheet.

Revert-Layer

The revert-layer value is similar to revert, but it only resets the property to the value specified by the user agent’s default stylesheet for the current cascade layer.

Unset

The unset value resets the property to its inherited value if it is inheritable, or to its initial value if it is not.

Description

The list-style-position property is designed to control where the list marker appears relative to the list item. It’s particularly useful for list items, which are elements with display: list-item; (like <li> elements).

Inside

When set to inside, the marker becomes part of the list item’s content box. This means the marker is treated as the first element within the list item, influencing the layout and potentially affecting line breaks.

Outside

When set to outside, the marker is placed outside the principal block box of the list item. This is the default behavior for lists, ensuring that the marker does not interfere with the content flow of the list item.

This property is inherited, so you can set it on a parent element (like <ol> or <ul>) and it will apply to all child list items. This makes it easy to manage the styling of nested lists.

In some cases, if a block element is the first child of a list item with list-style-position: inside, the block element is placed on the line after the marker box. This can be useful for creating custom list layouts where the marker is integrated into the content flow.

You can also use the shorthand list-style property to set multiple list-related properties in one declaration, which simplifies your CSS and makes your code more maintainable.

Browser Compatibility

The list-style-position property is widely supported across major web browsers:

Google Chrome

• Version: 1.0 and above
• Release Date: December 2008

Microsoft Edge

• Version: 12.0 and above

Mozilla Firefox

• Version: 1.0 and above
• Release Date: November 2004

Opera

• Version: 3.5 and above
• Release Date: November 1998

Safari

• Version: 1.0 and above
• Release Date: June 2003

Internet Explorer

• Version: 4.0 and above
• Release Date: September 1997

Examples

HTML

<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>
<ul class="inside-img">
  List 3
  <li>List Item 3-1</li>
  <li>List Item 3-2</li>
  <li>List Item 3-3</li>
  <li>List Item 3-4</li>
</ul>

CSS

.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

.inside-img {
  list-style-position: inside;
  list-style-image: url("starsolid.gif");
}

Result

• List 1 (inside): The markers (squares) will appear inside the list items.
• List 2 (outside): The markers (circles) will appear outside the list items.
• List 3 (inside with image): The markers (stars) will appear inside the list items, using a custom image as the marker.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS list-style-position Property</title>
    <style>
        .geek1 {
            list-style-position: outside;
        }

        .geek2 {
            list-style-position: inside;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center; color: green">
        CSS list-style-position Property
    </h1>

    <h3>list-style-position: outside;</h3>
    <ul class="geek1">
        <li>Bubble Sort</li>
        <li>Merge Sort</li>
        <li>Insertion Sort</li>
    </ul>

    <h3>list-style-position: inside;</h3>
    <ul class="geek2">
        <li>Bubble Sort</li>
        <li>Merge Sort</li>
        <li>Insertion Sort</li>
    </ul>
</body>
</html>

Output

• List with list-style-position: outside;: The markers will appear outside the list items.
• List with list-style-position: inside;: The markers will appear inside the list items.

Formal Definition

The list-style-position property in CSS controls where the list marker appears relative to the list item’s content box. This property is essential for creating well-structured and visually appealing lists.

Initial Value

• Value: outside
• Description: By default, the list marker is positioned outside the content box of the list item, so it doesn’t interfere with the text.

Applies To

• Element: List items
• Description: The list-style-position property specifically applies to elements with display: list-item;, such as <li>.

Inherited

• Value: Yes
• Description: The list-style-position property is inherited, so you can set it on a parent element (like <ol> or <ul>) and it will apply to all child list items.

Computed Value

• Value: As specified
• Description: The computed value of the list-style-position property is the same as the specified value, ensuring consistent behavior.

Animation Type

• Value: Discrete
• Description: The list-style-position property is not animatable, so it cannot be smoothly transitioned between values using CSS animations or transitions.

Formal Syntax

list-style-position = inside | outside

Explanation

• inside: When set to inside, the marker is part of the content flow of the list item, affecting the layout and potentially influencing line breaks.
• outside: When set to outside, the marker is positioned outside the content box of the list item, ensuring it does not interfere with the content flow.

Example

HTML

<ul class="inside">
  List 1
  <li>List Item 1-1</li>
  <li>List Item 1-2</li>
  <li>List Item 1-3</li>
  <li>List Item 1-4</li>
</ul>
<ul class="outside">
  List 2
  <li>List Item 2-1</li>
  <li>List Item 2-2</li>
  <li>List Item 2-3</li>
  <li>List Item 2-4</li>
</ul>

CSS

.inside {
  list-style-position: inside;
  list-style-type: square;
}

.outside {
  list-style-position: outside;
  list-style-type: circle;
}

Result

• List 1 (inside): The markers (squares) will appear inside the list items.
• List 2 (outside): The markers (circles) will appear outside the list items.

See Also

• list-style: The shorthand property that allows you to set multiple list-related properties in one declaration.
• list-style-type: The property that specifies the type of marker for list items (e.g., disc, circle, square, decimal).
• list-style-image: The property that allows you to use a custom image as the list marker.
• ::marker: The pseudo-element that represents the marker box of a list item.
• CSS Lists and Counters Module: A comprehensive guide to CSS lists and counters, including detailed specifications and examples.
• CSS Counter Styles Module: An in-depth look at CSS counter styles, which define how counters are represented in lists.

FAQs

What does list-style-position do in CSS?

The list-style-position property controls whether the list marker appears inside or outside the content flow of the list item.

What are the possible values for list-style-position?

It accepts two values: inside (markers appear within the content flow) and outside (markers are outside the content flow).

How does list-style-position: inside affect list item layout?

When set to inside, the marker becomes part of the content flow, meaning it will be indented along with the text and can affect line breaks.

What’s the default value for list-style-position?

The default value is outside, where the marker sits outside the content block, allowing text to align vertically with the list item.

Can list-style-position be used to create hanging indents?

Yes, using list-style-position: outside; along with adjusted margins, you can create hanging indents where the marker stays outside while the text is indented.