CSS: Control space between bullet and <li>

This is an outdated answer written in 2012

To summarise the other answers here – if you want finer control over the space between bullets and the text in a <li> list item, your options are:

(1) Remove the default marker and fake it with a background image:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

Advantages:

• You can use any image you want for the bullet
• You can use CSS background-position to position the image pretty much anywhere you want in relation to the text, using pixels, ems or %

Disadvantages:

• Adds an extra (albeit small) image file to your page, increasing the page weight
• If a user increases the text size on their browser, the bullet will stay at the original size. It'll also likely get further out of position as the text size increases
• If you're developing a 'responsive' layout using only percentages for widths, it could be difficult to get the bullet exactly where you want it over a range of screen widths

2. Add more space by adding padding on the <li> tag (assumes list-style-position: outside, doesn't remove default spacing)

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

Advantages:

• No image = 1 less file to download
• By adjusting the padding on the <li>, you can add as much extra horizontal space between the bullet and the text as you like
• If the user increases the text size, the spacing and bullet size should scale proportionally

Disadvantages:

• Can't move the bullet any closer to the text than the browser default
• Limited to shapes and sizes of CSS's built-in bullet types
• Bullet must be same colour as the text
• No control over vertical positioning of the bullet

3. Extend the list item beyond its box using a negative margin

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

Advantages:

• No image = 1 less file to download
• You get more control over the position of the bullet than with option (2) – you can move it closer to the text (although despite my best efforts it seems you can't alter the vertical position by adding padding-top to the <span>. Someone else may have a workaround for this, though...)
• The bullet can be a different colour to the text
• If the user increases their text size, the bullet should scale in proportion (providing you set the padding & margin in ems not px)

Disadvantages:

• Requires an extra unsemantic element (this will probably lose you more friends on SO than it will in real life ;) but it's annoying for those who like their code to be as lean and efficient as possible, and it violates the separation of presentation and content that HTML / CSS is supposed to offer)
• No control over the size and shape of the bullet

Here's hoping for some new list-style features in CSS4, so we can create smarter bullets without resorting to images or exta mark-up :)

This is an outdated answer written in 2013

This should do it. Be sure to set your bullets to the outside. you can also use CSS pseudo elements if you can drop them in IE7 downward. I don't really recommend using pseudo elements for this kinda thing but it does work to control distance.

ul {
  list-style-type: circle;
  list-style-position: outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

There seems to be a much cleaner solution if you only want to reduce the spacing between the bullet point and the text:

li:before {
    content: "";
    margin-left: -0.5rem;
}

You can use the padding-left attribute on the list items (not on the list itself!).

For list-style-type: inline:

It's almost the same like DSMann8's answer but less css code.

You just need to

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

Cheers

Old question, but the :before pseudo element works well here.

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

It works really well and doesn't require many extra rules or html.

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

Cheers!

Here is another solution using css counter and pseudo elements. I find it more elegant as it doesn't require use of extra html markup nor css classes :

    ol,
    ul {
        list-style-position: inside;
    }
    
    li {
        list-style-type: none;
    }
    
    ol {
        counter-reset: ol; //reset the counter for every new ol
    }
    
    ul li:before {
            content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
    }
    
    ol li:before {
            counter-increment: ol;
            content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
    }

I use non breakable spaces so that the spacing only affects the first line of my list elements (if the list element is more than one line long). You could use padding here instead.

The following solution works well when you want to move the text closer to the bullet and even if you have multiple lines of text.

margin-right allows you to move the text closer to the bullet

text-indent ensures that multiple lines of text still line up correctly

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

Using text-indent on li works best.

text-indent: -x px; will move the bullet closer to li and vice-versa.

Using relative on span the negative left might not work properly with older versions for IE. P.S- avoid giving positions as much as you can.

Nobody mentioned ::marker property

It allows to set the space smaller than browser default.

ul > li::marker {
  content: '•'; /* as a side effect sets the space to zero */
  font: 1.2em/1 sans-serif; /* adjust the bullet size */
}
ul > li {
  padding-left: .2em; /* have full control over the bullet space */
}

<ul>
  <li>one
  <li>two
  <li>three
</ul>

As @Vanuan mentions in the comment, this can not be used with list-style-position: inside as the MDN states:

inside: The ::marker is the first element among the list item's contents

So it is displayed inline and display property can not be set on ::marker, prohibiting to set padding on it. In that case white-space: pre can be set to the ::marker and spaces can be added to its content attribute.

Old question but still relevant. I recommend using negative text-indent. list-style-position must be outside.

Pros:

• Bullet is properly automatically positioned
• Change font size does not break the bullet position
• No extra elements ( no ::pseudo-elements too )
• Works for both RTL and LTR without change in CSS.

Cons:

• try
• to
• find
• one :)

You can use CSS property padding-inline-start:

li { 
    padding-inline-start: 1em;
}

Here's an excellent and fresh (2024) article I've found that answers this question exhaustively:

• Everything You Need to Know About the Gap After the List Marker

Here are the key details:

1. Built-in markers (e.g., disc):

   • There's a minimum gap that browsers apply by default.
   • This minimum gap cannot be decreased using standard CSS properties.
   • Oddly, there's no gap for decimal markers, but browser implementation varies.

2. ::marker pseudo-element:

   • ::marker supports only a small set of CSS properties. You can't set a margin or padding on it.
   • There's an open issue on W3C GitHub to add margin support.
   • Its main use is to replace content with a custom symbol or image, or you can use the list-style-type property for this.

3. Using custom markers:

   • Custom markers don't set the minimum gap, but you still can't control the marker's margin directly.
   • You have to set padding-left (or margin-left) on the li element:

     li {
       padding-left: 1em; /* Adjust as needed */
     }
     

   • This only works for the outside marker position. See below.
   • Custom string markers have a smaller default size than built-in markers. You'd need to change font-* on ::marker to increase their size.

4. list-style-position:

   • This property has a significant impact on the list box model.
   • With outside (default), the marker is outside the border of the <ul>/ol> element. You can still use margin to bring it inside of the perceived element extents.
   • The inside value affects how padding-left on <li> works:

     ul {
       list-style-position: inside;
     }
     

   • With inside, padding-left on <li> won't influence the gap between it and the marker. You'll have to use ::before to add the margin (or padding):

     li::before {
       content: '';
       display: inline-block;
       margin-left: 1em;
     }
     

Run this snippet to see the examples:

body {
  padding: 1em;
}

ul, ol, li {
  margin: 0;
  padding: 0;
}

ul, ol {
  border: 1px solid black;
}


        .increased-gap li {
            padding-left: 1em;
        }
        .minimal-gap {
            list-style-type: "•";
            list-style-position: outside;
        }
        .minimal-gap-number > li::marker {
           content: '[' counter(list-item) ']';
        }

        .gap-inside {
          list-style-position: inside;
            list-style-type: "•";
        }
        .gap-inside-increased {
          list-style-position: inside;
            list-style-type: "•";
        }
        .gap-inside-increased > li::before {
          content: '';
          margin-left: 1em;
        }

    <h2>List Gap Examples</h2>

    <!-- Default gap (built-in marker) -->
    <h3>1. Default gap</h3>
    <ul>
        <li>Some list text goes here.</li>
        <li>Another list item for comparison.</li>
    </ul>

    <!-- Increased gap -->
    <h3>2. Increased gap (still has the default gap)</h3>
    <ul class="increased-gap">
        <li>Some list text goes here.</li>
        <li>Another list item for comparison.</li>
    </ul>

    <!-- Minimal gap (using custom marker) -->
    <h3>3. Minimal gap (custom marker).</h3>
    <ul class="minimal-gap">
        <li>Some list text goes here.</li>
        <li>Another list item for comparison.</li>
    </ul>

    <h3>4. Minimal gap with numbering using ::marker</h3>
    <ol class="minimal-gap-number">
        <li>Some list text goes here.</li>
        <li>Another list item for comparison.</li>
    </ol>

    <h3>5. Moving the marker inside the list</h3>
    <ul class="gap-inside">
        <li>Some list text goes here.</li>
        <li>Another list item for comparison.</li>
    </ul>

    <h3>6. Increased gap inside the list</h3>
    <ul class="gap-inside-increased">
        <li>Some list text goes here.</li>
        <li>Another list item for comparison.</li>
    </ul>

It seems you can (somewhat) control the spacing using padding on the <li> tag.

<style type="text/css">
    li { padding-left: 10px; }
</style>

The catch is that it doesn't seem to allow you to scrunch it way-snug like your final example.

For that you could try turning off list-style-type and using &bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

An unordered list starts with the ul tag. Each list item starts with the The list items will be marked with bullets (small black circles) by default:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

Output:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

The text-indent property specifies the indentation of the first line in a text-block.
Note: Negative values are allowed. The first line will be indented to the left if the value is negative.

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

You can also use a background image replacement as an alternative, giving you total control over vertical and horizontal positioning.

See the answer to this Question

You can just give a padding-left to your <li> element.

If you'd prefer not to add additional markup e.g. <span>, you could use:

1. list-style-position: inside; to move the list-style closer to your text from the left
2. And if you still need to pull the list items closer you can use the ::before selector on the li element to move the text toward the bullet.

    ul {
        list-style-type: disc;
        list-style-position: inside;
        padding-left: 16px; /* or margin */
    }

    li::before {
        content: '';
        margin-left: -8px;
    }

• List item text
• List item text
• List item text
• List item text

I know I'm late, but for anyone finding this question who needs to use list-style-position: inside and want to control the spacing between the ::marker without using pseudo-elements like ::before or ::after, there's a simple solution. I encountered the same issue and found that applying letter-spacing to the ::marker does the trick. While I'm not certain if this is a good practice, it worked perfectly for my needs

More info w3schools ul { list-style: none; }

ul li::before { content: "\2022"; color: black; display: inline-block; width: 8px;}

It's interesting that most of us reach for margin, padding and/or position properties when faced with a problem like this. I know I did in the past. What if we're looking at it all wrong?

Before I provide a different solution, let's try and understand browser implementations a bit better. If we look at the user agent stylesheet for lists in WebKit, here's what we find:

ul, menu, dir {
    //...
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}

ol {
    //...
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 40px;
}
li {
    display: list-item;
    text-align: match-parent;
}

The other browsers are similar. The list indent is provided by padding on the ul and ol, not the li. Also worth noting, there's no negative positioning, margin, or indent anywhere to be found. So what is creating that gap between the bullet and the text?

The answer only becomes clear when we try changing the bullet character itself. I'll use the list-style-type property to do this, but instead of giving it a standard value like disc (the definition of which is up to the browser, being a little vague in the specs), I'll give it a quoted string value:

ul {
   list-style-type: "•";
}

<ul>
   <li>Oh dear</li>
   <li>what happened</li>
   <li>to the bullet spacing?</li>
</ul>

We can reintroduce the spacing by adding a standard space character after the bullet"

ul.custom-bulleted {
   list-style-type: "• ";
}

<ul class="custom-bulleted">
   <li>Ah, that's better.</li>
   <li>I've never cared for sticky bullets.</li>
</ul>

<ul>
   <li>I'm an unstyled list.</li>
   <li>I never have that problem!</li>
</ul>

I can only assume that this is akin to what the browsers are doing internally—inserting whitespace after the bullet and essentially floating the whole thing to the immediate left of each li. In fact the specs pretty much confirm this by comparing the default internal implementation to the @counter-style at-rule which allows us to define our own list types:

The following stylesheet fragment provides the normative definition of these predefined counter styles:

@counter-style disc {
  system: cyclic;
  symbols: \2022;
  /* • */
  suffix: " ";
}

The whitespace is right there in the suffix.

There's one unanswered question though… Why does the unstyled list look different to the custom-bulleted class in my example? Again, it seems to come down to each browser's different internal implementation. If you compare them in different browsers, even the custom bullets vary between browsers. What I have found though, is that you can standardise the appearance of a string list-style-type simply by declaring a font-family on li::marker, a feature that wasn't available to us when this question was originally asked.

So, coming back to the original question, if we want to control the space between the bullet and the li, we can do so by changing the width of the whitespace character, or by adding multiple whitespace characters, using a string-based list-style-type, which has wide browser support. Alternatively, we could define a custom list style with @counter-style, but that is not currently supported by Safari.

Unicode offers us a wide range of whitespace characters to choose from. Here's a list that uses an Em Space (U+2003):

ul {
   list-style-type: "•\002003";
}

<ul>
   <li>I like big gaps and I cannot lie</li>
   <li>You other brothers can't deny</li>
</ul>

I know this approach is not the first one that springs to mind. We've been so used to aligning things with margins, padding and indents that we tend to reach for those tools every time. But in many ways, the browser's way makes sense. What could be simpler than indenting the whole list with a single padding declaration on the ul, and letting the bullet take care of itself? (Maybe one day, the li::marker pseudo-element will support padding, for those who reckon they need even more fine-grained control. I won't be holding my breath though.)

A solution to control the space between numeral and text with respect to widest marking.

Tip: edit the last 'text-align' to get 'inside or 'outside effect. You can remove 'upper-roman' for standard numeral.

ol {
  counter-reset: n;
  display: table-row;
  text-align: left;
}
li {
  counter-increment: n;
  display: table-row;
  text-align: left;
}
li::before {
  content: counter(n, upper-roman) ".";
  display: table-cell;
  padding-right: 1rem;
  text-align: left;
}

<ol>
  <li>test1</li>
  <li>test2</li>
  <li>test3</li>
</ol>

I don't like either of the solutions presented above. My solution:

li:firts-letter { margin-left: -0.25rem; }

Margin value will vary for different fonts

You can use ul li:before and a background image, and assign position: relative and position:absolute to the li and li:before, respectively. This way you can create an image and position it wherever you want relative to the li.

ul
{
list-style-position:inside;
} 

Definition and Usage

The list-style-position property specifies if the list-item markers should appear inside or outside the content flow.

Source: http://www.w3schools.com/cssref/pr_list-style-position.asp

Use padding-left:1em; text-indent:-1em for the <li> tag.
Then, list-style-position: inside for the <ul> tag.

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

If your list-style is inside then you could remove the bullet and create your own ... e.g. (in scss!)

            li {
                list-style: none;
                &:before {
                    content: '- ';
                }
            }

And if you list style is outside then you could do something like this:

            li { 
                padding-left: 10px;
                list-style: none;
                &:before {
                    content: '* '; /* use any character you fancy~! */
                    position: absolute;
                    margin-left: -10px;
                }
            }

I'm 99.9999% sure no one cares because this question has been asked 12 years ago, but I needed to solve this just now and here's what I found:

A trailing space is treated as part of the escape, so use 2 spaces if you actually want to follow the escaped character with a space.

And, indeed, it works!

ul.asterisks {
  list-style-type: '\2731\ ';
}

Source: Using character escapes in markup and CSS

P.S. Maybe this is because I've been at it for so long that I'm losing my mind? Inserting spaces works in the browser's dev view. To actually get the spaces to take I had to...escape...the spaces?? (See above.) Madness. (BTW, Why are all these pages from 2010? What happened in 2010? Wait a minute...12 years ago was...2010. :fear:)

Source: CSS character escape sequences

I found another "solution" but it might be to hackish. But liked to share anyway because it might be usefull for someone. For me it was perfect because i can use the responsiveness of the bullet when the font size changes. Also the bullet is always inline because of position inside. And i had to work with borders between the list. Only downfall it uses empty list-items.

ul {
    border-top: 2px solid #000;
    padding: 0;
    list-style-position: inside;

    li {

        &:nth-of-type(odd) {
            padding-top: 10px;
            position: absolute;
            pointer-events: none;
        }

        &:nth-of-type(even) {
            position: relative;
            list-style-type: none;
            padding-top: 10px;
            padding-bottom: 14px;
            padding-left: 24px;

            &::after {
                content: '';
                display: block;
                border-bottom: 2px solid #000;
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
            }
        }
    }
}

<ul>
    <li></li>
    <li>
        List item one (this will align perfect on multiple lines) list item one list item one list item one list item one
    </li>
    <li></li>
    <li>
        List item two
    </li>
    <li></li>
    <li>
        List item three
    </li>
</ul>