CODEWITHSUNDEEP
htmlcsshtml-lists
pawelmysior
pawelmysior

Reputation: 3250

Getting rid of the margin between list style type and text

Well, thats the html code:

<ul>
  <li>first item</li>
  <li>second item</li>
</ul>

And the css:

ul, li { margin: 0px; padding: 0px; }

Nothing fancy, right? And nothing to be proud of, it just shows a list without any margins or padding. Well, almost...

What about this space there? I can't seem to get rid of it. Any ideas? :]

Upvotes: 3

Views: 9870

Answers (3)

ЯegDwight
ЯegDwight

Reputation: 25229

The only reliable cross-browser way to achieve this is by dropping the bullets altogether and using background images on your lis instead. This works in all major browsers (even IE5 and Netscape 7.1) and does not require any changes to the HTML itself. See Listamatic for an excellent guide.

Upvotes: 2

Harmen
Harmen

Reputation: 22438

If you want to remove the space between text and bullet, you got to change the HTML-code a little bit:

<ul>
  <li><span>first item</span></li>
  <li><span>second item</span></li>
</ul>

By giving the li a relative position and the span an absolute position, you can move the span to the left:

li {
    position: relative;
}

li span {
    position: absolute;
    left: 0;
}

Upvotes: 6

marcgg
marcgg

Reputation: 66436

You can hack around to get it working, but maybe you might want to consider removing the list-styles and use a background on your <li> instead, like that you'll have total control over it.

A good reference about that: http://www.alistapart.com/articles/taminglists/

W3Schools : http://www.w3schools.com/Css/css_list.asp

Upvotes: 2

Related Questions