How to Remove the Margin from a List with CSS

In this tutorial, we go over how to remove the margin space which is created in a list by default, with both ordered lists and unordered lists.

When you create a list in HTML, either an ordered list or an unordered list, by default, no indentation or space is created for the items on that list.

Below is an example of an unordered list, in the default state, without any modifications made to the CSS code for this unordered list tag.

Things To Pick Up At the Supermarket

• Toothbrush
• Toothpaste
• Apples
• A Bag of Lettuce
• Bananas

The HTML code to create the above unordered list is:

<ul> <li>Toothbrush</li> <li>Toothpaste</li> <li>Apples</li> <li>A Bag of Lettuce</li> <li>Bananas</li> </ul>

Having this indentation or margin space may used the majority of the time, but some times this indentation may not be wanted. To remove this margin from the items of a list, we can modify the CSS page which the page is linked to and remove the margin.

This is the same list as above, only now with the indentation or margin removed.

Things To Pick Up At the Supermarket

• Toothbrush
• Toothpaste
• Apples
• A Bag of Lettuce
• Bananas

To remove the margin from an unordered list, along with the padding, use the following HTML code to do so.

<ul class="nomargin"> <li>Toothbrush</li> <li>Toothpaste</li> <li>Apples</li> <li>A Bag of Lettuce</li> <li>Bananas</li> </ul>

This HTML code assigns the unordered list to the class called nomargin. This is important because now we can go the CSS page and modify this class nomargin to allow for an unordered list with no indentation to the left or above.

Now we go to the linked CSS page and add in the lines of CSS:

.nomargin { padding 0; margin 0; }

This enables you to remove margin and padding from lists in HTML.