CSS list-style-position Property

The list-style-position property in CSS specifies the position of the marker box with respect to the principal block box.

Syntax:

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

Property values:

outside: In this value the marker is outside the principal block box i.e the bullet points will be outside the list item. This is the default value.
inside: In this value the marker is the first element among the list item’s contents i.e the bullet points will be inside the list item.
initial: This mode sets this property to its default value.

Example:

html

<!DOCTYPE html>
<html>
   
<head>
    <title>CSS list-style-position Property</title>
    <style>
        .geek1 {
            list-style-position: outside;
        }
 
        .geek2 {
            list-style-position: inside;
        }
    </style>
</head>
 
<body>
    <h1 style="text-align: center; color: green">
        CSS list-style-position Property
    </h1>
 
    <h3>list-style-position: outside;</h3>
    <ul class="geek1">
        <li>Bubble Sort </li>
        <li>Merge Sort</li>
        <li>Insertion Sort</li>
    </ul>
 
    <h3>list-style-position: inside;</h3>
    <ul class="geek2">
        <li>Bubble Sort </li>
        <li>Merge Sort</li>
        <li>Insertion Sort</li>
    </ul>
</body>
   
</html>