列表中元素之间的垂直间距

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?

Answer 1

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>