It is possible with CSS to control how much vertical space exists between list elements. In this article, I will demonstrate how to control this.

Here is a codepen example of a bulleted list with bullets that are styled as squares, but no control over spacing between list items:

See the Pen How to add space between list items – 1 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

Now, to add space between the list elements, all we have to do is use padding-bottom in our CSS. For example:

padding-bottom: 40px;

This works great, except we may not want to have this extra space also added between the bottom of the list and content that follows.

See the Pen How to add space between list items – 2 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

In order to keep the space between list items, but not have this extra space between the bottom of the list and the following content, we can use the CSS3 last-child selector. For example, here I am identifying the last list element by changing it red:

li:last-child {
  color: #ff0000;
}

See the Pen How to add space between list items – 3 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

The last-child selector can be used to eliminate the extra space at the bottom of the list by setting padding-bottom to 0px. For example:

li:last-child {
  padding-bottom: 0px;
}

For example:

See the Pen How to add space between list items – 4 by Chris Nielsen (@Chris_Nielsen) on CodePen.0

For more information about the CSS3 last-child selector, see:
https://www.w3schools.com/cssref/sel_last-child.asp