How to make the distance between a point and text in an unordered list smaller?

Question

I use a list style image to show points for an unordered list. They appear a little far from the text, and I want to make the distance between the list text and the point a little less. I tried indentation and markup, but nothing works. Can someone suggest something.

Answer 1

You can try negative text-indent on <li> :

 li { text-indent: -5px; } 

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

Browser support can be a bit dodgy (for example, Opera and WebKit do not display this script the same way). You can also try using the :before pseudo-element to add your own brand:

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

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

But then you will have problems with browsers that do not understand :before ; but everyone except IE7 and older understands :before , so this may not be a problem.

If CSS3 is fine, you can do something with a ::marker pseudo-element .

There is not much fine-grained control over how markers for a list item are displayed.

Answer 2

try it

HTML:

• hi wolrd
• 123
• to pay
• to 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;} 

Answer 3

You can put a div inside your li elements and set their left margins to something negative:

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