CSS list-style-position

The CSS list-style-position property is used to define the position of marker of list items. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul.a{list-style-position: outside;}
      ul.b{list-style-position: inside;}
   </style>
</head>
<body>

   <h2>list-style-position: outside</h2>
   <ul class="a">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>

   <h2>list-style-position: inside</h2>
   <ul class="b">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>
   
</body>
</html>

Output

list-style-position: outside

CSS
HTML
JS

list-style-position: inside

CSS
HTML
JS

CSS list-style-position Syntax

The syntax of list-style-position property in CSS, is:

list-style-position: x;

The value of x should be any of the following:

outside - used to set the marker, outside from the content of the list items. This is the default value
inside - used to set the marker, inside to the content area of the list items
initial - used to use the default value
inherit - used to use the value inherited by the parent element

CSS list-style-position Example

An example of list-style-position property is already given at start of this article. But let me create another example, where I've defined a border to differentiate the two, that is, outside (the default one), and the inside, very clearly:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      ul{border: 2px solid red;}
      ul li{border: 2px solid blue;}
      ul.inside{list-style-position: inside;}
   </style>
</head>
<body>

   <h2>Without list-style-position</h2>
   <ul>
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>

   <h2>With list-style-position set to inside</h2>
   <ul class="inside">
      <li>CSS</li>
      <li>HTML</li>
      <li>JS</li>
   </ul>
   
</body>
</html>

Output

Without list-style-position

CSS
HTML
JS

With list-style-position set to inside

CSS
HTML
JS

CSS Online Test

« Previous Tutorial Next Tutorial »