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>
      .inside {list-style-position: inside;}
      .outside{list-style-position: outside;}
       li {border:1px solid #cccccc}

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

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

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

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


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.

Related articles