I have an unordered list which I want split into columns, so I'm using CSS column-count
on the parent div:
<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>
However, for some reason this leaves a blank line in the first row of the first column:
How do I get my columns neat and tidy?
There is a JSFiddle
The UL has a margin-top that causes the space. Set the margin-top on 0 on the UL and you're good to go.