CSS list-style-position Property

The list-style-position property specifies whether the list marker for a list item should appear inside or outside the list-item box.

The list-style-position property is applied to list items and elements for which the display is set to "list-item". By default this includes <li> elements. It also can be set on the parent elements: <ol> or <ul>.

Initial Value outside
Applies to List items.
Inherited Yes.
Animatable No.
Version CSS1
DOM Syntax object.style.listStylePosition = "inside";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inside {
      list-style-position: inside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "inside".</p>
    <ul class="inside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

In the given example the list items are positioned inside the box.

Here is another an example where the list items are placed outside:

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .outside {
      list-style-position: outside;
      }
      li {
      border: 1px solid #666;
      padding: 5px;
      margin-bottom: 15px;
      }
    </style>
  </head>
  <body>
    <h2>List-style-position property example</h2>
    <p>Here the list-style is positioned "outside".</p>
    <ul class="outside">
      <li>List item 1</li>
      <li>List item 2</li>
      <li>List item 3</li>
    </ul>
  </body>
</html>

Values

Value Description
outside Puts marker box out of the principal black box. It is the default value of this property.
inside Sets the marker box as a first inline box in the principal black box.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.


Practice Your Knowledge

Which is the default value of CSS list-style-position property?




Related articles