Question

I wantto reduce the gap between a bullet and its text in html ..

FOr instance I have

• This is the text

How is it possible to increase or decrease the gap between the bullet and The text using css?

Answer 1

The only way I’ve been able to achieve this [decreasing the native browser rendered spacing of the li] is by adding additional markup to your li and setting a negative margin.

As an example:

Markup:

<ul>
    <li>
        <span>This is the text</span>
    </li>
</ul>

CSS

li span { margin-left: -10px; }

This could add quite a bit of extra unnecessary markup for such a small requirement. You’d be better of using a background image on your li element which offers better position control without all the extra markup.