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:

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 »


Liked this post? Share it!