CSS - list-style-position

Description

The list-style-position property affects the placement of a marker in relation to the content of the list item.

Possible Values

Sr.No.	Value & Description
1	none NA
2	inside If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.
3	outside If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Sr.No.

Value & Description

none

inside

If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.

outside

If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

Applies to

All the elements with a display of list-item.

DOM Syntax

object.style.listStylePosition = "inside";

Example

Here is the example −

Live Demo

<html>
   <head>
   </head>
   
   <body>
      <ul style = "list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style = "list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style = "list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style = "list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
   
</html>

This will produce following result −

Print Page