Reducing the gap between a bullet and text in a list item

Jitendra Vyas picture Jitendra Vyas · Mar 14, 2010 · Viewed 100.8k times · Source

How can I reduce default gap between bullet and text in an <li>?

  • Item 1
  • Item 2
  • Item 3

I want to reduce gap between the bullet and "I".

Answer

Steve Harrison picture Steve Harrison · Mar 14, 2010

I'm not sure whether this is the best way to do it, but you could specify a negative text-indent:

li {
    text-indent: -4px;
}

...where your HTML code looks like:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

(Tested in Safari 4.0.4 and Firefox 3.0.11.)