Advertisement
Advertisement


How do I set vertical space between list items?


Question

Within a <ul> element, clearly the vertical spacing between lines can be formatted with the line-height attribute.

My question is, within a <ul> element, how do I set the vertical spacing between the list items?

2015/06/20
1
117
6/20/2015 4:53:44 PM


HTML

<ul>
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS

li:not(:last-child) {
    margin-bottom: 5px;
}

EDIT: If you don't use the special case for the last li element your list will have a small spacing afterwards which you can see here: http://jsfiddle.net/wQYw7/

Now compare that with my solution: http://jsfiddle.net/wQYw7/1/

Sure this doesn't work in older browsers but you can easily use js extensions which will enable this for older browsers.

2013/10/08

I would be inclined to this which has the virtue of IE8 support.

li{
    margin-top: 10px;
    border:1px solid grey;
}

li:first-child {
    margin-top:0;
}

JSFiddle

2013/10/08

Add a margin to your li tags. That will create space between the li and you can use line-height to set the spacing to the text within the li tags.

2013/10/08

Many times when producing HTML email blasts you cannot use style sheets or style /style blocks. All CSS needs to be inline. In the case where you want to adjust the spacing between the bullets I use li style="margin-bottom:8px;" in each bullet item. Customize the pixels value to your liking.

2019/01/15

To apply to an entire list, use

ul.space_list li { margin-bottom: 1em; }

Then, in the html:

<ul class=space_list>
<li>A</li>
<li>B</li>
</ul>
2020/04/24