Appearance
How to Control the Space Between Bullets and <li> Elements
Solutions with HTML and CSS
In this snippet, you can find some methods of controlling the space between bullets and <li> elements.
The best way is using the HTML <span> element. Put the content into a <span>, and set the CSS position property to “relative” and also, add the left property to control the space. Note that this shifts the text left relative to the bullet, rather than adjusting the bullet's position.
Example of changing the space between bullets and list items by using <span> elements:
How to Control the Space Between Bullets and <li> Elements
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.demo li {
color: #666666;
}
.demo span {
position: relative;
left: -12px;
}
</style>
</head>
<body>
<ul class="demo">
<li>
<span>Text 1</span>
</li>
<li>
<span>Text 2</span>
</li>
<li>
<span>Text 3</span>
</li>
</ul>
</body>
</html>Result
- Text 1
- Text 2
- Text 3
In the next example, we use the padding-left property for the same purpose.
Adjusting the padding on <li> elements allows you to add as much extra space between the bullet and text as you want. When the text size is increased, the bullets will scale proportionally.
Example of changing the space between bullets and list items by using the padding-left property:
Example of changing the space between bullets and list items by using the padding-left property:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.demo ul {
padding-left: 50px;
}
</style>
</head>
<body>
<ul class="demo">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</body>
</html>If you use this method, take into account that the bullet and the text must be of the same color. Also, you cannot move the bullet closer to the text than the browser default, and you won’t have control over the bullet’s vertical positioning.
In our last example, we use the background property to add arrows instead of bullet points.
Example of changing the space between bullets and list items:
Example of changing the space between bullets and list items:
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.demo ul {
padding-left: 2em;
}
.demo ul li {
list-style-type: none;
padding-left: 2em;
color: #f00;
background: url('https://www.w3docs.com/build/images/arrow-right.4aad274a.png') no-repeat center left;
}
.demo ul li span {
display: block;
margin-left: -0.5em;
color: #000;
}
</style>
</head>
<body>
<ul class="demo">
<li>some text</li>
<li>
<span>Text 1</span>
</li>
<li>
<span>Text 2</span>
</li>
<li>
<span>Text 3</span>
</li>
</ul>
</body>
</html>Here also we use the padding-left property on the <li> and <ul> elements. Then, we specify the margin-left and display properties for <span> elements inside the <li> tags.