title: CSS Box-Shadow adds arbitrary white border to Div
body: <p>I'm adding a box shadow to an element containing an img and it's creating an arbitrary white border on the bottom of the element. No border is being applied via CSS (and I even tried overriding with <code>border:none;</code> without luck). When applied to the image directly, it appears properly. But when applied to a div containing an image, the border appears.</p>
  
  <p>Any help is grealty appreciated.</p>
  
  <pre><code>&lt;style&gt;
  html,body,div,img {margin:0; padding:0;} 
  body {padding:50px;}
  
  .badge_image {
    float:left;
    /* css drop shadow */
    -webkit-box-shadow: 1px 1px 5px 0px #a2958a;
    -moz-box-shadow: 1px 1px 5px 0px #a2958a;
    box-shadow: 1px 1px 5px 0px #a2958a; 
  }
  &lt;/style&gt;
  
  &lt;div class="badge_image"&gt;
      &lt;img src="badge-image.jpg" height="75" width="75" /&gt;
  &lt;/div&gt;  
  
  &lt;br clear="all" /&gt;&lt;br clear="all" /&gt;
  
  &lt;img src="badge-image.jpg" height="75" width="75" class="badge_image" /&gt;&lt;!-- works fine --&gt;
  </code></pre>