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.
Image with example of the problem
<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.