为div设置box-shadow后底部出现空白间隙的问题解决问询

问题描述：制作包含3张图片的页面，每张图片嵌套在div中，给外层div（.tarjeta）添加box-shadow属性后，底部出现空白间隙。尝试设置图片height:100%、调整margin/padding/box-sizing均无效，移除阴影后间隙消失，寻求解决办法。

对应的代码：

<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>
     </div>
</body>

这个间隙的核心原因是：<img>标签默认是inline-block元素，浏览器会为其保留基线对齐的留白空间，当给父容器.tarjeta添加box-shadow后，阴影会包裹这个留白区域，导致底部出现明显的空白。

以下几种简单有效的解决方法：

1. 将图片转为块级元素 #

直接给图片添加display: block，消除inline-block带来的基线留白：

.img img {
    width: 300px;
    height: 300px;
    display: block; /* 新增 */
}

2. 修改图片的垂直对齐方式 #

设置图片vertical-align: bottom，改变其对齐逻辑，隐藏留白：

.img img {
    width: 300px;
    height: 300px;
    vertical-align: bottom; /* 新增 */
}

3. 清除父容器的行高 #

给.img容器设置line-height: 0，消除行高带来的留白：

.img {
    line-height: 0; /* 新增 */
}
.img img {
    width: 300px;
    height: 300px;
}

4. 给.tarjeta添加溢出裁剪 #

通过overflow: hidden强制容器高度由图片完全撑开，同时裁剪多余的留白：

.tarjeta {
    margin: 20px;
    position: relative;
    box-shadow: 0px 0px 10px 10px gray;
    overflow: hidden; /* 新增 */
}

推荐使用方法1，这是最彻底且兼容性最好的方案，能从根源解决inline-block元素的留白问题。

内容的提问来源于stack exchange，提问作者Kumi ho