How to Increase or Decrease the Spacing Between HTML List Items

In this article, we will show how you can adjust the spacing between items of HTML lists, either increasing or decreasing the spacing between items.

This may be necessary if you don't like the spacing which exists on a list that you have on a page.

By default, in HTML, lists usually have item spacing between 110% and 120%.

Below is an example of a list in HTML, with its default spacing.

List of Things to Do

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

The HTML code to create the above list is:

<ul> <li>Take Out the Garbage</li> <li>Wash the Dishes</li> <li>Wash the Car</li> <li>Do the Laundry</li> </ul>

To adjust the spacing between the list items of the above list, we add this code to the ul tag in our CSS code:

ul { line-height:200% {

The CSS code will create greater space. This will produce the following list:

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

If you want to increase the spacing even more, we just insert a greater value into the line-height attribute. The greater the value added, the more spacing is given in between list items.

This would be the list if the line-height is adjusted to 400%:

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

If you want to decrease the spacing between list items, then give the line-height attribute a lower value. For example, the list below is with the line-height set to 80%:

• Take Out the Garbage
• Wash the Dishes
• Wash the Car
• Do the Laundry

And this is how we can adjust line spacing between items of HTML lists using CSS.