list-style-position

The list-style-position CSS property specifies the position of the marker box in the principal block box. It is often more convenient to use the shortcut list-style.

Example

<!DOCTYPE html>
<html>
    <head>
        <style>
            ul.a {
                list-style-position: inside;
            }
            
            ul.b {
                list-style-position: outside;
            }
        </style>
    </head>
    <body>
        <p>
            The following list has list-style-position: inside:
        </p>
        <ul class="a">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <p>
            The following list has list-style-position: outside:
        </p>
        <ul class="b">
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <p>
            "list-style-position: outside" is the default setting.
        </p>
    </body>
</html>