css - 为什么无序列表在 CSS 列数开头留下空白项？

Question

我有一个无序列表，我想将其拆分为列，因此我在父 div 上使用 CSS column-count:

<h1>Mushrooms:</h1>
<div style="column-count:4">
  <ul>
    <li>Porcini</li>
    <li>Shittake</li>
    <li>Button</li>
    <li>Chestnut</li>
    <li>Oyster</li>
    <li>Portobello</li>
    <li>Crimino</li>
    <li>Chanterelle</li>
    <li>Morels</li>
    <li>Enoki</li>
  </ul>
</div>

但是，由于某种原因，这会在第一列的第一行中留下一个空行:

如何使我的栏目整洁？

有一个JSFiddle

Answer 1

UL 有一个导致空格的顶部边距。将 UL 上的 margin-top 设置为 0，就可以开始了。