Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Changing the Position of List Markers in CSS
The CSS list-style-position property is used to set the marker position of list items. The default value for this property is outside which sets the marker outside the list item. It is having the following values −
inside − The bullet points are positioned inside the list item
outside − Default. The bullet points are positioned outside the list item
Syntax
selector {
list-style-position: value;
}
Possible Values
| Value | Description |
|---|---|
inside |
The marker is inside the list item text |
outside |
Default. The marker is outside the list item text |
inherit |
Inherits the value from parent element |
Position List Markers Outside the List Items
We have positioned the list markers outside the list items using the list-style-position property with the value outside −
Example
Let us see the example to position list markers outside the list items −
<!DOCTYPE html>
<html>
<head>
<style>
.outside-list {
width: 300px;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.outside-list li {
list-style-position: outside;
padding: 5px;
margin: 5px 0;
background-color: #e6f3ff;
border-left: 3px solid #007acc;
}
</style>
</head>
<body>
<h3>List with Outside Markers</h3>
<ol class="outside-list">
<li>First item with outside marker</li>
<li>Second item with outside marker</li>
<li>Third item with outside marker</li>
</ol>
</body>
</html>
A numbered list appears with markers positioned outside the list item boxes. The numbers appear to the left of the colored background areas of each list item.
Position List Markers Inside the List Items
We have positioned the list markers inside the list items using the list-style-position property with the value inside −
Example
Let us see an example to position the list markers inside the list items −
<!DOCTYPE html>
<html>
<head>
<style>
.inside-list {
width: 300px;
background-color: #f0f0f0;
padding: 20px;
border: 2px solid #333;
}
.inside-list li {
list-style-position: inside;
padding: 5px;
margin: 5px 0;
background-color: #ffe6e6;
border-left: 3px solid #cc0000;
}
</style>
</head>
<body>
<h3>List with Inside Markers</h3>
<ol class="inside-list">
<li>First item with inside marker</li>
<li>Second item with inside marker</li>
<li>Third item with inside marker</li>
</ol>
</body>
</html>
A numbered list appears with markers positioned inside the list item boxes. The numbers appear within the colored background areas of each list item, flowing with the text.
Comparison: Inside vs Outside
The following example demonstrates both positions side by side to show the visual difference −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
}
.list-box {
width: 200px;
padding: 15px;
border: 2px solid #666;
background-color: #f9f9f9;
}
.outside li {
list-style-position: outside;
background-color: #fff3cd;
padding: 8px;
margin: 4px 0;
}
.inside li {
list-style-position: inside;
background-color: #d4edda;
padding: 8px;
margin: 4px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="list-box">
<h4>Outside Position</h4>
<ul class="outside">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
<div class="list-box">
<h4>Inside Position</h4>
<ul class="inside">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
</div>
</div>
</body>
</html>
Two side-by-side lists appear. The left list shows bullets outside the yellow background areas of list items. The right list shows bullets inside the green background areas, aligned with the text.
Conclusion
The list-style-position property controls whether list markers appear inside or outside the list item's content area. Use outside for traditional list styling and inside when markers should flow with the text content.
6K+ Views
