主页 / user-28354819

Kumi ho's questions

Martin Hope
Kumi ho
Asked: 2024-11-18 18:11:12 +0800 CST
  • 5

我正在尝试制作一个包含 3 幅图像的页面，每幅图像位于一个 div 内，但是应用 box-shadow 时下面会出现间隙。

问题示例图

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

我想将 box-shadow 效果应用于每个 div，而不在下方留下间隙。我尝试将 height: 100% 应用于图像，以便它们占据整个 div 的高度，但不起作用。此问题仅在应用 box-shadow 时出现；如果我删除该效果，该间隙就会消失。我还尝试调整边距、填充和 box-sizing 属性，但似乎都无法解决问题。我正在寻找一种解决方案，使我能够应用 box-shadow 效果，而不会在 div 之间产生任何不必要的间隙。

html