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
Selected Reading
Usage of CSS list-style-position property
The list-style-position property controls whether list markers (bullets, numbers) appear inside or outside the content area of list items.
Syntax
list-style-position: inside | outside | initial | inherit;
Values
- outside (default): Markers appear outside the content area
- inside: Markers appear inside the content area
Example: Outside vs Inside Positioning
<!DOCTYPE html>
<html>
<head>
<style>
.outside-list {
list-style-position: outside;
list-style-type: disc;
border: 1px solid #ccc;
padding: 10px;
}
.inside-list {
list-style-position: inside;
list-style-type: disc;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h3>Outside Position (Default)</h3>
<ul class="outside-list">
<li>This is a long text that will wrap to multiple lines to demonstrate how the list marker position affects text alignment</li>
<li>Second item</li>
</ul>
<h3>Inside Position</h3>
<ul class="inside-list">
<li>This is a long text that will wrap to multiple lines to demonstrate how the list marker position affects text alignment</li>
<li>Second item</li>
</ul>
</body>
</html>
Key Differences
| Property Value | Marker Position | Text Wrapping Behavior |
|---|---|---|
outside |
Outside content area | Wrapped text aligns with first line |
inside |
Inside content area | Wrapped text aligns under marker |
Example with Different List Types
<!DOCTYPE html>
<html>
<head>
<style>
.numbered-outside {
list-style-position: outside;
list-style-type: decimal;
}
.numbered-inside {
list-style-position: inside;
list-style-type: decimal;
}
</style>
</head>
<body>
<h3>Numbered List - Outside</h3>
<ol class="numbered-outside">
<li>First item with longer text content</li>
<li>Second item</li>
</ol>
<h3>Numbered List - Inside</h3>
<ol class="numbered-inside">
<li>First item with longer text content</li>
<li>Second item</li>
</ol>
</body>
</html>
Common Use Cases
- Outside: Traditional list formatting, better readability for long items
- Inside: Compact layouts, when markers should be part of the content flow
Conclusion
The list-style-position property controls marker placement and text alignment in lists. Use outside for traditional formatting and inside for compact layouts where markers are part of the content flow.
Updated on: 2026-03-15T23:18:59+05:30
102 Views
Advertisements