CSS list-style-position Property
Last Updated :
17 Apr, 2024
CSS List-Style-Position Property is a key attribute that determines the position of the marker box in relation to the principal block box. This property gives you the control to fine-tune the placement of your list markers, enhancing the structure and readability of your lists.
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:Â In this example code, we are using the CSS list style position property.
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>
Output:Â 
 Supported Browsers: The browser supported by list-style-position property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Firefox 1.0 and above
- Opera 3.5 and above
- Apple Safari 1.0 and above
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...