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.

Example of changing the space between bullets and list items by using <span> elements:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      li {
        color: #666666;
      }
      span {
        position: relative;
        left: -12px;
      }
    </style>
  </head>
  <body>
    <ul>
      <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:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        padding-left: 50px
      }
      ul li {
        padding-left: 50px
      }
    </style>
  </head>
  <body>
    <ul>
      <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:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ul {
        padding-left: 2em;
      }
      ul li {
        list-style-type: none;
        padding-left: 2em;
        color: #f00;
        background: url('/build/images/arrow-right.4aad274a.png') no-repeat center left;
      }
      ul li span {
        display: block;
        margin-left: -0.5em;
        color: #000;
      }
    </style>
  </head>
  <body>
    <ul>
      <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.