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
How to indicate whether the marker should appear inside or outside of the box containing the bullet points with CSS?
The list-style-position property controls whether list markers (bullets, numbers) appear inside or outside the content area of list items. This property is particularly important when list items contain long text that wraps to multiple lines.
Syntax
list-style-position: inside | outside | initial | inherit;
Values
| Value | Description |
|---|---|
| outside | Default. Marker appears outside the content area. Text wraps align with the first line. |
| inside | Marker appears inside the content area. Text wraps underneath the marker. |
| initial | Sets to default value (outside) |
| inherit | Inherits from parent element |
Example: Basic Usage
<!DOCTYPE html>
<html>
<head>
<style>
.outside-list {
list-style-type: circle;
list-style-position: outside;
margin-bottom: 20px;
}
.inside-list {
list-style-type: square;
list-style-position: inside;
}
</style>
</head>
<body>
<h3>Outside Position (Default)</h3>
<ul class="outside-list">
<li>BMW</li>
<li>Audi</li>
</ul>
<h3>Inside Position</h3>
<ul class="inside-list">
<li>BMW</li>
<li>Audi</li>
</ul>
</body>
</html>
Example: Long Text Wrapping
The difference becomes more apparent with longer text content:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px 0;
}
.outside {
list-style-position: outside;
}
.inside {
list-style-position: inside;
}
</style>
</head>
<body>
<div class="container">
<h4>Outside Position</h4>
<ul class="outside">
<li>This is a long text item that will wrap to multiple lines to demonstrate the outside positioning behavior</li>
</ul>
</div>
<div class="container">
<h4>Inside Position</h4>
<ul class="inside">
<li>This is a long text item that will wrap to multiple lines to demonstrate the inside positioning behavior</li>
</ul>
</div>
</body>
</html>
Comparison
| Position | Marker Location | Text Wrapping | Use Case |
|---|---|---|---|
| outside | Outside content area | Aligns with first line | Standard lists, better readability |
| inside | Inside content area | Wraps under marker | Compact layouts, special designs |
Conclusion
Use list-style-position: outside for better readability with long text, and inside for compact layouts. The outside value is the default and most commonly used.
Updated on: 2026-03-15T23:18:59+05:30
443 Views
Advertisements