How to set vertical space between list items?

Question

Inside the <ul> element, it is clear that the vertical spacing between the lines can be formatted using the line-height attribute.

My question is: within the <ul> element, how to set the vertical distance between list items?

Answer 1

You can use margin. See an example:

http://jsfiddle.net/LthgY/

 li{ margin: 10px 0; } 

Answer 2

I would be inclined to have IE8 support power.

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

Jsfiddle

Answer 3

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 are not using a special case for the last li element, your list will have a small interval, which you can see here: http://jsfiddle.net/wQYw7/

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

I am sure that this does not work in older browsers, but you can easily use js extensions that will allow this to be used for older browsers.

Answer 4

Add margin to li tags. This will create a space between li , and you can use line-height to set the spacing of text in li tags.

Answer 5

In many cases, you cannot use style sheets or style / style blocks when creating HTML mail messages. All CSS must be inline. In case you want to adjust the distance between the bullets, I use li style = "margin-bottom: 8px;" at every bullet point. Adjust the pixel value to your liking.

Answer 6

setting padding-bottom for each list using a pseudo-class is a viable method. You can also use the line height. Remember that font properties such as font-family, Font-weight, etc., play a role for uneven heights.

Answer 7

<br> between the lines of the <li></li> seems to work fine in all the web browsers I tried, but it cannot pass the W3C CSS3 online check. This gives me exactly the distance between the lines that I am doing. As far as I know, since it undoubtedly works, I continue to use it, no matter what the W3C says, until someone can find a good legal alternative.