totn CSS

CSS: list-style-position property

This CSS tutorial explains how to use the CSS property called list-style-position with syntax and examples.

Description

The CSS list-style-position property defines the position of a list item marker in the principal block box.

Syntax

The syntax for the list-style-position CSS property is:

list-style-position: value;

Parameters or Arguments

value

The appearance of a list item element. It can be one of the following:

Value Description
inside The marker box is inside of the principal block box
ul { list-style-position: inside; }
outside The marker box is outside of the principal block box (this is the default)
ul { list-style-position: outside; }
inherit Element will inherit the list-style-position from its parent element
ol { list-style-position: inherit; }

Note

Browser Compatibility

The CSS list-style-position property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer (IE)
  • Opera
  • Safari (WebKit)

Example

We will discuss the list-style-position property below, exploring examples of how to use this property in CSS.

Outside

Let's look at a CSS list-style-position example where we set the list-style-position to outside.

The HTML would look like this:

<ol>
  <li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li>
  <li>CheckYourMath.com has answers to your every day Math questions.</li>
  <li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li>
</ol>

The CSS would look like this:

ol { list-style-position: outside; background: lightgreen; }

The ordered list would look like this:

CSS

In this CSS list-style-position example, we have set the list-style-position to outside. This results in the list item markers (ie: numbering) to appear less indented and when the list item text wraps, the text continues to remain more indented than the numbering.

Inside

Next, let's look at a CSS list-style-position example where we set the list-style-position to inside.

The HTML would look like this:

<ol>
  <li>TechOnTheNet.com has been providing helpful references, how-to's and FAQs since 2003.</li>
  <li>CheckYourMath.com has answers to your every day Math questions.</li>
  <li>BigActivities.com is designed for parents, teachers, and caregivers to help kids learn the basics or just have fun!</li>
</ol>

The CSS would look like this:

ol { list-style-position: inside; background: lightgreen; }

The ordered list would look like this:

CSS

In this CSS list-style-position example, we have set the list-style-position to inside. This results in the list item markers (ie: numbering) to appear more indented and when the list item text wraps, the wrapped text lines up with the numbering.

Share on: