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

Question

我有一个连续排列的元素列表。但是，由于列表太多，容器装不下，其中一些放在第二行。

考虑到元素已经设置了边距，如何在这些元素的第一行和第二行之间添加额外的间距？

我希望 "Tests" 的第一行和 "Tests" 的第二行之间有更多的间距。我不希望两条线上方或下方的间距发生变化，只是介于两者之间。我在想它与相邻的兄弟选择器有关吗？

Answer 1

给出以下内容 CSS:

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

这CSS不会导致线上方有间距。

片段

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

html

css

spacing