title: Remove extra space from top of CSS columns in Chrome
body: <p>Example: <a href="https://jsfiddle.net/5tehhb0n/1/" rel="nofollow noreferrer">https://jsfiddle.net/5tehhb0n/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
    &lt;div class="item"&gt;&lt;img src="http://placehold.it/100x100"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.wrapper {
      -moz-column-count: 2;
      -webkit-column-count: 2;
      column-count: 2;
      background-color: blue;
      display: block;
      overflow: hidden;
  }
  .item {
    -webkit-column-break-inside: avoid;
    display: block;
    background-color: red;
    margin-bottom: 50px;
  }
  </code></pre>
  
  <p>In Chrome, this results in the first item in the second column having a space above it, caused by the margin of the last item in the first column:</p>
  
  <p><a href="https://i.stack.imgur.com/IbScv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IbScv.png" alt="Example"></a></p>
  
  <p>Setting <code>display: inline-block</code> on each <code>.item</code> solves the issue but I need to maintain margin-collapsing, which does not work with <code>inline-block</code>.</p>
  
  <p>Is there some way to avoid the extra space and still keep <code>display: block</code> on each <code>.item</code>?</p>