How do I set vertical space between list items?
HtmlCssHtml ListsHtml Problem Overview
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?
Html Solutions
Solution 1 - Html
Solution 2 - Html
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.
Solution 3 - Html
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;
}
Solution 4 - Html
Old question but I think it lacked an answer. I would use an adjacent siblings selector. This way we only write "one" line of CSS and take into consideration the space at the end or beginning, which most of the answers lacks.
li + li {
margin-top: 10px;
}
Solution 5 - Html
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.
Solution 6 - Html
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>
Solution 7 - Html
you can also use the line-height property on the ul
ul {
line-height: 45px;
}
<ul>
<li>line one</li>
<li>line two</li>
<li>line three</li>
</ul>
Solution 8 - Html
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.
Solution 9 - Html
setting padding-bottom for each list using pseudo class is a viable method. Also line height can be used. Remember that font properties such as font-family, Font-weight, etc. plays a role for uneven heights.
Solution 10 - Html
Use CSS grid on the parent ul
element like so:
ul {
display: grid;
gap: 10px;
}
Solution 11 - Html
I found that it was much easier for me to create spacing after list items by adding margin-bottom to ordered lists unordered lists as a whole instead of individual list items.
<ol style="line-height: 1.5em; margin-bottom: 15px">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<ul style="line-height: 1.5em; margin-bottom: 15px">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
Solution 12 - Html
<br>
between <li></li>
line entries seems to work perfectly well in all web browsers that I've tried, but it fails to pass the on-line W3C CSS3 checker. It gives me precisely the line spacing I am after. As far as I am concerned, since it undoubtedly works, I am persisting in using it, whatever W3C says, until someone can come up with a good legal alternative.