List Style Position

Control the placement of list item markers in unordered lists using the list-style-position property.

The list-style-position property specifies the position of the list item marker in unordered lists.

Outside

The outside value means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically.

<body>
  <h3>To create a web page:</h3>
  <ol style="list-styl-position: outside;">
    <li>Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.</li>
    <li>Save the file as .html (File - save as - select HTML)</li>
    <li>Write your HTML code.</li>
    <li>Double-click on the saved file, and it will be opened in your default browser.</li>
  </ol>
</body>

Inside

The inside value means that the bullet points will beinside the list item. The list item will be part of the text and push the text at the start.

<body>
  <h3>To create a web page:</h3>
  <ol style="list-styl-position: inside;">
    <li>Open a Text Editor (Notepad) or Source Code Editor (Sublime Text) program.</li>
    <li>Save the file as .html (File - save as - select HTML)</li>
    <li>Write your HTML code.</li>
    <li>Double-click on the saved file, and it will be opened in your default browser.</li>
  </ol>
</body>

Resize your large screen 💻 to see the difference 😁.

List Style Position

Outside

Inside

On this page