順序付けられていないリストの先頭に、空白の項目が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上のマージントップを0に設定すると、あなたはいいですね。

Answer 2

も忘れないでください（ブラウザによっては、UL

Answer 3

のデフォルト値を持っているので、あなたがcolumn-countを使用するには、ここdivを使用する必要はありません、あなたはulに直接適用することができ、ULのためのマージン0PXを作りますベンダープレフィックス）

さらにmargin（私の問題を解決します）ulもデフォルトでpaddingにリセットされている可能性があります。

注：インラインスタイルを使用しないでください。

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>