List-style-position

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

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .inside {list-style-position: inside;}
      .outside{list-style-position: outside;}
       li {border:1px solid #cccccc}
    </style>
  </head>
  <body>

      <h2>The first you can see the list-style which is positioned "inside":</h2>

       <ul  class="inside">
           <li>Appetizers</li>
           <li>Main Course</li>
           <li>Salads</li>
      </ul>

      <h2>Below you can see the list-style which is positioned "outside":</h2>

       <ul class="outside">
          <li>Cold Drinks</li>
          <li>Hot Drinks</li>
          <li>Ice-Creams</li>
       </ul>

 </body>
</html>

Here the result is:



Property Values

Value Descriptions
outside It puts marker box out of the principal black box. It is the default value of this property.
inside It sets the marker box as a first inline box in the principal black box.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.