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

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 somebo开发者_运维知识库dy please suggest something.

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.

Try this

HTML:

• hi wolrd
• 123
• pay
• see you

css:

ul {
margin:0px;
padding:0px;
}
ul li{ padding:0 0 0 10px; background:url(...) 0px 6px no-repeat; list-style-type:none;}

You could put divs inside your li elements and set their left margins to something negative:

li > div {
    margin-left:-4px;
}

I know this post is really old but you can use list-style-position: inside and then add whatever padding or margin you need on the list itself.