Search code examples
csshtml-listscss-multicolumn-layout

Why does an unordered list leave a blank item at the start with CSS column-count?


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:

enter image description here

How do I get my columns neat and tidy?

There is a JSFiddle


Solution

  • 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.