Remove extra space from top of CSS columns in Chrome
<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>