为什么无序列表在CSS列计数的开头留下一个空白项？

Question

我有一个无序列表,我想拆分成列,所以我column-count在父div上使用CSS :

<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,你很高兴.