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

Question

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

score 5 · Accepted Answer · answered Jun 13 '16 at 12:57

5

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.

answered Jun 13 '16 at 12:57

adamk22

581
4
18

score 1 · Answer 2 · answered Jun 13 '16 at 13:21

1

make margin 0px for the ul,because browsers have default value for the ul

answered Jun 13 '16 at 13:21

Maharajan

178
9

score 1 · Answer 3 · answered Jun 13 '16 at 13:24

You don't need to use a div here to use column-count, you can apply directly to ul (also don't forget the vendor prefix)

besides margin (which my solve your issue) ul also have by default padding which you might want to reset.

Note: avoid use inline styles.

body {
  margin: 0
}
ul {
  margin: 0 0 36px 0;
  padding: 0 0 0 20px;
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4
}

<h1>Mushrooms:</h1>
<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>

Not working well, the bullets are on the left and not in every column. Chrome OS X 51.0.2704.79 (64-bit) — actimel, Jun 13 '16 at 13:29

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

3 Answers3