Free web tools

Default margin and padding on lists

Take the following simple ordered list:

<ol>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ol>

By default this will display like so:

1. First item
2. Second item
3. Third item

Most browsers will automatically add either some margin or padding to the left of both ordered and unordered lists to indent them. If you wish to remove this simply use the following CSS code to reset the left margin and padding to zero:

ol, ul {
    margin-left:0;
    padding-left:0;
}

This sets the margin-left and padding-left properties of all unordered and ordered lists on the page to 0. Our list now looks like this:

1. First item
2. Second item
3. Third item

Oops, the list numbers are now off of the page. So we will require some padding on the left, just not as much as included by default. Around 20px should suffice in this instance:

ol, ul {
    margin-left:0;
    padding-left:20px;
}

Our list now looks like this:

1. First item
2. Second item
3. Third item

There is also some default margin/padding on the top and bottom of the list, this is generally useful for readability but if you want to remove it simply use this CSS:

ol, ul {
    margin:0; 
    padding:0 0 0 20px; /* 20px on left padding */
}

Lists now look like this:

1. First item
2. Second item
3. Third item

For your information

Firefox and other gecko browsers will use padding-left on lists whilst internet explorer will use margin-left. The default margin is typically 40 pixels.