Jump to content


Online media matters

How can I create space between list items?

If it is a block of text, the best thing to do is wrap the text with a paragraph element (this is both valid and semantically correct, as Rudy pointed out on thelist):
<li><p>a list item</p></li>

In other cases, while you can add two break elements at the end of each list item:
<li>a list item<br><br></li>

CSS should be used to more effectively, and accurately, accomplish this because it doesn’t affect the structure of a document. This rule will create the same effect as the above:
li { margin-top: 1em; }

While this CSS doesn’t work in Netscape 4.x, and it does add one line of spacing at the start of the list, it won’t break that browser as changing margin-top to margin-top would.

Adjusting the line height of a list item will add spacing between each item, but it will also add spacing between the lines within the item.