CSS Box-Shadow добавляет в Div произвольную белую рамку

Question

Я добавляю тень блока к элементу, содержащему img, и он создает произвольную белую рамку в нижней части элемента.С помощью CSS границы не применяются (и я даже безуспешно пытался переопределить border:none;).При непосредственном применении к изображению оно отображается правильно.Но при применении к элементу div, содержащему изображение, появляется рамка.

Любая помощь приветствуется.

<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 -->

Answer 1

Попробуйте отобразить блок для изображения.

.badge_image img {
    display: block;
}

Answer 2

Либо:

1. Добавьте display:block; к вашему img.
2. Определите line-height из 0px для вашего div.

Изображение является встроенным элементом, поэтому для текста остается место, оставляя эту строку.

Демо

Answer 3

И еще один способ добиться этого - добавить virtical-align: top; к img.