Vertical spacing between elements in a list

Question

I have a list of elements which are in a row. However, because there are too many lists to fit in the container, some of them go on a second line.

How do I add extra spacing between the first and second line of these elements, considering the elements already have margins set?

I want there to be more spacing between the first line of "Tests" and the second line of "Tests". I don't want the spacing above or under the two lines to change, just in between. I'm figuring it has something to do with adjacent sibling selectors?

score 3 · Accepted Answer · answered Oct 13 '15 at 00:00

Give the following CSS:

ul {line-height: 2; vertical-align: top;}

This CSS will not cause spacing above the line.

Snippet

ul {display: block; width: 200px; list-style: none; margin: 0; padding: 0; border: 1px solid #ccc; vertical-align: top;}
ul li {display: inline-block; width: 40px; line-height: 1;  vertical-align: top;}
ul {line-height: 2; vertical-align: top;}

<ul>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
  <li>Test</li>
</ul>

Vertical spacing between elements in a list

1 Answers1