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?

Mandrill

ul li { margin: ???; padding: ???; line-height: ???; } all or some of those CSS attributes. – Anon

Answer 1

You can use margin. See the example:

http://jsfiddle.net/LthgY/

li {
  margin: 10px 0;
}

Neurasthenia

specifically, use margin on the li elements not the ul element. – Armageddon

The syntax for the CSS margin property (with 4 values) is: margin: top right bottom left – Rubbing

Answer 2

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;
}

Wilmoth

This deserves more upvotes to raise awareness to this solution. This is as simple as it can be. – Belligerency

The important point here, for me, is margin-top rather than line-height. I have multiline list items--i.e. each list item takes up several lines--and I don't want extra spacing between the lines within a list item; I only want extra spacing between list items. This does that. (I also am writing HTML in a context where I can't use CSS code per se; I have to put the CSS inline.) – Haletta

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 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.

Hum

@Layne part of our job as web developers/coders is to provide solutions that will work in as many environments as possible. Your answer is really overkill for the question asked. – Linearity

I don't think so. You only provide a solution for the environment you want to target, everything else would be overkill unless you plan to expand. Plus all answers have the disadvantage of adding space before and/or after the first/last list element. Which was not the question, he wanted to only have a spacing BETWEEN the list elements (at least he wrote it). The last element in the other answers will have a spacing afterwards although there are no following li elements. – Hum

The environment he's working with is web browsers. That's not overkill to suggest a solution that works everywhere. Plus, if you really are worried about the last item margin, you wouldn't suggest a solution that would need js to fix. You could use :first-child and it would work in everything IE7+ – Linearity

@Linearity I disagree about targeting everything. Part of the stress of web development comes from supporting browsers that don't support us. Safari is one of them. We need to stand up to browsers that hold back the internet, medium.com/@richtr/…. Our web pages should bring back the "We do not support your browser" notices not go through hell to make it work everywhere. And we need to inform and stand up to clients too. Or we can do nothing and be awesome floor mats. – Terrazzo

@1.21gigawatts "Our web pages should bring back the "We do not support your browser"" mhm, no. That is called sabotage of competition, and is illegal in multiple countries. Microsoft did that with Skype for Web. Skype for Web still works perfectly in other browsers. Google made Youtube malfunction in Safari for more than a year. Google blocks Tor users from using certain services. Isn't the point of the "web platform" to make apps and services platform-independent, as in not block specific platforms? If you wanna do that, why not make native programs instead? In the end, they're more powerful. – Karlee

I agree with your reply. Let me clarify. To be more specifically I would say, "We do not support your browser version or feature." – Terrazzo

Answer 4

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

Displant

Answer 5

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.

Linearity

Answer 6

you can also use the line-height property on the ul

ul {
  line-height: 45px;
}

div {
  border: 2px solid black;
}

<div>
  <ul>
    <li>line one</li>
    <li>line two</li>
    <li>line three</li>
  </ul>
</div>

Walk

That only works for short line items, if the line item text wraps that gap is between each intra-line of the wrapped text, which looks terrible. – Precession

Answer 7

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>

Hyades

Answer 8

Use CSS grid on the parent ul element like so:

ul {
  display: grid;
  gap: 10px;
}

Aholla

Answer 9

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.

Spheroidal

Also, the style /style type tags are deprecated – Hintz

Answer 10

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>

Peale

Answer 11

Use CSS flex on the parent ul element like so:

ul {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Unleash

Answer 12

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.

Kilter

Can you provide an example of your solution ? – Saracen

Answer 13

<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.

Stairway

Your suggestion works fine if you're happy with the current line height but I think he wants to specify his own amount of space. Using line breaks just create new lines using the current line height. – Terrazzo

If you iterate on a list with many items, adding br is a terrible practice. Markup is the safest and sureshot way of adding space as the above answers have suggested it. – Jinks