CSS list-style-position Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 18 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The list-style-position property in CSS is used to specify the position of the list-item marker (such as a bullet or number) in relation to the list item's content. It primarily applies to <ul> (unordered lists), <ol> (ordered lists), and <li> (list items) elements.

By adjusting this property, you can control whether the marker is placed inside or outside the list item's content box, allowing for more flexible styling of lists.

💡 Syntax

The syntax for the list-style-position property is as follows:

Syntax

Copied

element {
  list-style-position: value;
}

value can be either inside or outside.

🎛️ Default Value

The default value of the list-style-position property is outside. This means that the marker is placed outside the list item's content box by default.

🏠 Property Values

Value	Description
inside	The marker is placed inside the list item's content box, causing the marker to appear next to the text. If the text wraps to another line, it aligns with the beginning of the text, not the marker.
outside	The marker is placed outside the list item's content box, causing the marker to appear to the left of the text. The text aligns with the start of the list item, not the marker.

📄 Example

In this example, we will demonstrate the use of list-style-position with an unordered list. The first list uses the default outside value, while the second list uses inside.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS list-style-position Example</title>
  <style>
    .outside {
      list-style-position: outside;
    }
    .inside {
      list-style-position: inside;
    }
  </style>
</head>
<body>
  <h1>List Style Position Example</h1>
  
  <h2>Outside (Default)</h2>
  <ul class="outside">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  
  <h2>Inside</h2>
  <ul class="inside">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

🖥️ Browser Compatibility

The list-style-position property is widely supported across all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. This broad compatibility makes it a reliable choice for styling list markers in web projects.

🎉 Conclusion

The list-style-position property offers a simple yet powerful way to control the positioning of list-item markers.

Whether you want to place markers inside or outside the list item's content box, this property provides the flexibility to style lists according to your design needs. Experiment with different positions to achieve the desired look for your lists.