Question

I have a list of li elements inside a ul with associated style classes (below). What I want is for every list item to be along the left edge of the page. Putting borders around both ul and li I can see that the li items are indented exactly 40px inexplicably.

I’ve tried margin-left: 0px on both elements and I’ve tried list-style:none; which does help to eliminate the bullets and slide everything left up to the indestructible 40px margin.

I’ve determined through trial and error that if I do this in my li:

left: -40px;
position: relative;

I get the desired result but the margin merely pops to the right side / tail of each li which is less troublesome visually but still a terrible hack. There must be a way to make it disappear?

My style code looks like this:

ul.selectorlist
{
    list-style: none;
    padding: none;
    margin: 0px;

    border-width: 1px;
    border-style: solid;
    border-color: white;
}


li.channel
{
//  left: -40px; // <- Does the trick but COME ON, REALLY?!

    width: 100%;
    background-colour: black;
    font-family:georgia;
    font-size:18px;
    padding: 0px;
    margin: 0 0 0 0;

    border-width: 1px;
    border-style: solid;
    border-color: white;
}

Note:

I have also played around with:

list-style-position: inside / outside;

Which actually pops the li bullets on the left and right sides of the 40px line.

Answer 1

A little experimenting (in FireFox 11) shows that the default layout for a list includes a 40px left padding, which is there to make room for the bullets.

Add

padding:0;

to the styles for the <ul> and your mysterious gap should disappear. However, this may have undesirable consequences with regard to the bullet position. Getting rid of the bullets or setting list-style-position to inside are both possible remedies, depending on your particular layout requirements.

Note that this padding is on the <ul> element, which, when you add borders, is visually similar to a margin on the <li>. This is one reason why development tools like Firebug or those included in Chrome and IE are so useful—it’s very easy to see the box model of any element.