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
How to Control the Space between Bullets and li Elements?
In HTML lists, controlling the space between bullet points and list items is a common styling requirement. By default, browsers apply standard spacing between bullets and text content, but this can be customized using various CSS techniques to achieve the desired visual layout.
HTML provides three types of lists
Ordered List (ol) Uses numbers or other schemes for sequential items
Unordered List (ul) Uses bullets for non-sequential items
Description List (dl) Used for term-definition pairs
Default List Spacing
When creating an unordered list, browsers apply default spacing between bullets and list item text. Here is a basic example showing the default appearance
Example
<!DOCTYPE html>
<html>
<head>
<title>Default List Spacing</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Seven Wonders of the World</h3>
<ul>
<li>The Great Wall of China</li>
<li>Chichen Itza</li>
<li>Christ the Redeemer</li>
<li>Machu Picchu</li>
<li>Petra</li>
<li>Taj Mahal</li>
<li>Colosseum</li>
</ul>
</body>
</html>
The output of the above code shows the default browser spacing
Seven Wonders of the World ? The Great Wall of China ? Chichen Itza ? Christ the Redeemer ? Machu Picchu ? Petra ? Taj Mahal ? Colosseum
Using Span Elements to Control Spacing
The <span> tag is an inline container that can be styled with CSS to adjust text positioning. By wrapping list item text in spans and applying relative positioning, you can move text closer to or farther from bullets.
Syntax
<span style="position: relative; left: value;">List item text</span>
Example
Following example demonstrates how to reduce spacing by moving text closer to bullets using spans
<!DOCTYPE html>
<html>
<head>
<title>Span Method for List Spacing</title>
<style>
li {
color: #2c3e50;
}
span {
position: relative;
left: -10px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Seven Wonders of the World</h3>
<ul>
<li><span>The Great Wall of China</span></li>
<li><span>Chichen Itza</span></li>
<li><span>Christ the Redeemer</span></li>
<li><span>Machu Picchu</span></li>
<li><span>Petra</span></li>
<li><span>Taj Mahal</span></li>
<li><span>Colosseum</span></li>
</ul>
</body>
</html>
The span elements move the text 10 pixels to the left, reducing the gap between bullets and text
Seven Wonders of the World ?The Great Wall of China (reduced spacing) ?Chichen Itza ?Christ the Redeemer ?Machu Picchu ?Petra ?Taj Mahal ?Colosseum
Using the Padding-Left Property
The padding-left property controls the left padding of list items, effectively adjusting the space between bullets and text content. This method provides more control over list item spacing.
Syntax
li {
padding-left: length|percentage|initial|inherit;
}
Example
Following example shows how to increase spacing using padding-left
<!DOCTYPE html>
<html>
<head>
<title>Padding-Left Method for List Spacing</title>
<style>
ul {
background-color: #f8f9fa;
padding: 20px;
border-radius: 5px;
}
li {
padding-left: 30px;
color: #495057;
margin-bottom: 5px;
}
h3 {
color: #343a40;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Healthy Living Factors</h3>
<ul>
<li>Regular Exercise</li>
<li>Balanced Diet</li>
<li>Adequate Sleep</li>
<li>Stress Management</li>
<li>Hydration</li>
<li>Social Connections</li>
</ul>
</body>
</html>
The output shows increased spacing between bullets and text
Healthy Living Factors
? Regular Exercise
? Balanced Diet
? Adequate Sleep
? Stress Management
? Hydration
? Social Connections
Using Text-Indent Property
The text-indent property provides another approach to control bullet spacing by indenting the first line of each list item.
Example
<!DOCTYPE html>
<html>
<head>
<title>Text-Indent Method for List Spacing</title>
<style>
ul {
list-style-position: inside;
background-color: #e3f2fd;
padding: 15px;
border-radius: 8px;
}
li {
text-indent: 20px;
color: #1565c0;
margin-bottom: 8px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Programming Languages</h3>
<ul>
<li>JavaScript</li>
<li>Python</li>
<li>Java</li>
<li>C++</li>
<li>HTML/CSS</li>
</ul>
</body>
</html>
Method Comparison
Here is a comparison of the different methods for controlling bullet spacing
| Method | Pros | Cons | Best Use Case |
|---|---|---|---|
| Span with positioning | Fine control, can reduce spacing below default | Extra HTML markup required | When you need to move text closer to bullets |
| Padding-left | Clean CSS-only approach, easy to implement | Cannot reduce spacing below browser default | When you need to increase spacing from bullets |
| Text-indent | Works well with inside list positioning | Limited control, affects entire list item | When using list-style-position: inside |
Combining Methods for Advanced Control
Example
You can combine multiple CSS properties for precise control over list appearance
<!DOCTYPE html>
<html>
<head>
<title>Combined Methods for List Spacing</title>
<style>
.custom-list {
list-style-position: outside;
padding-left: 25px;
background-color: #f1f8ff;
border-left: 4px solid #0066cc;
padding: 15px;
}
.custom-list li {
padding-left: 15px;
margin-bottom: 10px;
color: #003366;
}
.custom-list li span {
position: relative;
left: -5px;
font-weight: 500;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Web Development Tools</h3>
<ul class="custom-list">
<li>< 
2K+ Views
