<ul class="example">
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
  <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</li>
</ul>
<p>
  The space at the top of this block varies, depending on the number of LI elements, because the bottom padding of the #example element changes</p>
<p>
  Check it by adding LI elements</p>
<p>
  By adding one element, the 3rd column goes blank.</p>
<p>
  By adding a second element, the container .example gets more bottom padding.</p>
<p>
  As if this isn't confusing enough, changing the number of columns changes the behavior described above.</p>
<p>
  With two columns, the amount of extra padding that gets added is really small.</p>
<p>
  With four columns, a lot of bottom padding is removed.</p>
<p>Also, changing the padding and/or margin on the li element gives different results.</p>

.example {
  -webkit-columns: 3;
  -moz-columns: 3;
  columns: 3;
  -webkit-column-gap: 2em;
  -moz-column-gap: 2em;
  column-gap: 2em;
  background-color: #0ff;
}

body {
  font-size: 12px;
  font-family: 'Georgia', serif;
  font-weight: 400;
  line-height: 1.45;
  color: #333;
  background: #ecf0f1;
  padding: 1em;
}

li {
  background: white;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  background-color: green;
  padding: 1em;
  margin-bottom: 1.3em;
}