Space can be added between each list item by setting a margin on the "LI". Margin can be set on the top, bottom or top and bottom of each list item. This version has a margin of ". 1em" on top and bottom of the list items.
You can use margin. See the example:
http://jsfiddle.net/LthgY/
li{
margin: 10px 0;
}
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.
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
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;
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With