How to make distance between dot and text in a unordered list smaller?

Question

I am using list style image to show dots for an unordered list. They are appearing a little far from text and i want to make the distance between the list text and dot a little less. I have tried padding and margin but nothing seems to work. Can somebody please suggest something.

Answer 1

You could try a negative text-indent on the <li>:

li {
    text-indent: -5px;
}

For example: http://jsfiddle.net/ambiguous/QgNxw/

Browser support might be a bit dodgy (e.g. Opera and WebKit don't render that fiddle the same way). You could also try using the :before pseudo-element to add your own bullet:

.closer {
    list-style-type: none;
}
.closer:before {
    content: '•';
    margin-right: 3px;
}

For example: http://jsfiddle.net/ambiguous/eXxzH/

But then you'll have trouble with browsers that don't understand :before; but everyone but IE7 and older understand :before so that might not be an issue.

If CSS3 is okay, you might be able to do something with the ::marker pseudo-element.

There isn't that much fine grained control over how the bullets for a list item are rendered.