CSS - list-style-position property

Quiz

CSS list-style-position property controls the placement of list item markers in relation to the list item's content. The property affects how the markers are aligned within or outside the list item's box.

Syntax

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

Property Values

Value	Description
inside	The marker is placed inside the list, i.e., at the beginning of the first line of the list item's content.
outside	The marker is placed outside the main box containing the list item's content. Default.
initial	It sets the property to its default value.
inherit	It inherits the property from the parent element.

Examples of CSS List Style Position Property

The following examples explain the list-style-position property with different values.

List Style Position Property with Inside Value

To make the list item markers appear inside the content area of the list item, we use the inside value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 30px;
         font-weight: bold;
      }

      .unordered1 {
         color: blue;
         border: 2px solid black;
         width: 50%;
         list-style-position: inside;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-position property
   </h2>
   <h4>
      list-style-position: inside
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

List Style Position Property with Outside Value

To make the list item markers be positioned outside the main box containing the list item's content, we use the outside value. This is default value. This is shown in the following example.

Example

<!DOCTYPE html>
<html>

<head>
   <style>
      li {
         font-size: 30px;
         font-weight: bold;
      }

      .unordered1 {
         color: blue;
         border: 2px solid black;
         width: 50%;
         list-style-position: outside;
      }
   </style>
</head>

<body>
   <h2>
      CSS list-style-position property
   </h2>
   <h4>
      list-style-position: outside
   </h4>
   <ul class="unordered1">
      <li>
         Apple
      </li>
      <li>
         Banana
      </li>
      <li>
         Orange
      </li>
      <li>
         Pineapple
      </li>
   </ul>
</body>

</html>

Supported Browsers

Property
list-style-position	1.0	4.0	1.0	1.0	3.5

css_properties_reference.htm

Print Page