Why is there a white space left under the div when I apply box-shadow?

I'm trying to make a page with 3 images, each one inside a div, but when applying box-shadow there is a gap underneath.

<style>
     body {
          margin: 0;
     }

     .img img {
          width: 300px;
          height: 300px;
     }

     .contenedor {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
     }

     .tarjeta {
          margin: 20px;
          position: relative;
          box-shadow: 0px 0px 10px 10px gray;
     }

     .cuerpo {
          position: absolute;
          top: 0;
     }
</style>

<body>
     <div class="contenedor">

          <div class="tarjeta">
               <div class="img">
                    <img src="img/image1.jpg" alt="">
               </div>

               <div class="cuerpo">
                    <div class="texto">
                         <h3>Juanita</h3>
                         <p>Modelo: Lorem ipsum, dolor sit amet consectetur   adipisicing elit. Dolores, nihil.</p>
                    </div>
               </div>
          </div>

I want to apply the box-shadow effect to each of the divs without leaving a gap underneath. I've tried applying a height: 100% to the images so that they occupy the entire height of the div, but it doesn't work. This problem only appears when applying box-shadow; if I remove the effect, that gap disappears. I've also tried adjusting the margin, padding, and box-sizing properties, but none of them seem to solve the issue. I'm looking for a solution that will allow me to apply the box-shadow effect without creating any unwanted gaps between the divs.

Solution

Its because, by default, images are display: inline and aligned with the baseline of any adjacent text. The space below the baseline is for descenders in the text.

Easiest fix is to style the images themselves as display: block or display: inline-block. Another option is to adjust the line-height of the parent to a value less than 1.