CSS Box-Shadow ajoute une bordure blanche arbitraire aux Div.

Question

J'ajoute un box shadow à un élément contenant un img et cela crée une bordure blanche arbitraire en bas de l'élément. Aucune bordure n'est appliquée par le biais du CSS (j'ai même essayé de la remplacer par l'option border:none; sans succès). Lorsqu'elle est appliquée à l'image directement, elle apparaît correctement. Mais lorsqu'elle est appliquée à un div contenant une image, la bordure apparaît.

Toute aide est la bienvenue.

<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

Essayez le bloc d'affichage pour l'image.

.badge_image img {
    display: block;
}

Answer 2

Soit :

1. Ajouter un display:block; à votre img .
2. Définir un line-height de 0px sur votre div .

Une image est un élément en ligne, il y a donc de l'espace pour le texte, en laissant cette ligne.

Démo

Answer 3

El display: block ne fonctionne pas pour moi, dans quelques cas, mais en plaçant cette solution sur le même élément que le box-shadow, cela fonctionne.

backdrop-filter: blur(0px);

Je ne sais pas pourquoi ça marche, mais ça marche.

Answer 4

Et une autre façon d'y parvenir est d'ajouter virtical-align: top; à un img .