CSS Box-Shadow adds arbitrary white border to Div

I'm adding a box shadow to an element c开发者_运维问答ontaining 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 border:none; without luck). When applied to the image directly, it appears properly. But when applied to a div containing an image, the border appears.

Any help is grealty appreciated.

<style>
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; 
}
</style>

<div class="badge_image">
    <img src="badge-image.jpg" height="75" width="75" />
</div>  

<br clear="all" /><br clear="all" />

<img src="badge-image.jpg" height="75" width="75" class="badge_image" /><!-- works fine -->

try display block for image.

.badge_image img {
    display: block;
}

Either :

1. Add a display:block; to your img.
2. Define a line-height of 0px on your div.

An image is an inline element, so there is space for text, leaving that line.

Demo

The display: block solution doesn't work for me, in a couple of cases, but putting this on the same element as the box-shadow works.

backdrop-filter: blur(0px);

I'm unsure why this works, but it does.

And one more way to achieve this is to add virtical-align: top; to an img.