title: CSS column issues with box shadow
body: <p>I am using CSS Column count to create a grid. However, I cannot fix a slight issue regarding the box shadow I am using.</p>
  
  <p>It seems that the top row of each column has the top clipped off. This doesn't effect the border, but only box shadow.</p>
  
  <p>heres a fiddle: <a href="http://jsfiddle.net/DTcHh/3947/" rel="nofollow">http://jsfiddle.net/DTcHh/3947/</a></p>
  
  <p>If you look closely you can see that the top row items have no shadow, and it looks like it has been clipped to the bottom of the column? Scroll to the bottom of the container and you will see the top part of the shadow there.</p>
  
  <p>Any ideas how to fix?</p>
  
  <p>Some back up css:</p>
  
  <pre><code>#builds {
    width: 96%;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 2%;
  }
  .cols {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
  }
  .item {
    height: auto;
    width: 99%;
    margin-left: 1%;
    -webkit-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    break-inside: avoid;
    border: 4px solid #000;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 1), 0 1px 2px rgba(0, 0, 0, 1);
    margin-bottom: 20px;
  }
  
  &lt;div id="builds" class="cols"&gt;
    &lt;div class="item"&gt;
      &lt;div class="thumbnail"&gt;
        &lt;img src="http://buildsanctuary.com/user_uploads/cover_images/Wenman,738.jpeg" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Padding to the top of the columns container does not work. And if I give the items class a margin of 10, it works on the first element but not the others.</p>