主页 / coding / 问题 / 79199498
Accepted
Kumi ho
Asked: 2024-11-18 18:11:12 +0800 CST

当我应用 box-shadow 时，为什么 div 下方会留有空白？[重复]

  • 772

我正在尝试制作一个包含 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

2 个回答

  1. Best Answer

    这是因为，默认情况下，图像display: inline与任何相邻文本的基线对齐。基线下方的空间用于文本中的降部。

    最简单的解决方法是将图像本身的样式设置为display: block或display: inline-block。另一个选择是将父级的行高调整为小于 1 的值。

    • -1

  2. 要解决这个问题，有很多方法，如下所示：

    1. 垂直对齐可以设置为顶部、居中或底部。

      图片vertical-align: top; /* or bottom or middle */​

    2. 将图像从通常的内联元素更改为块级元素。

      图片 { display: block; }

    3. 将父级的行高设置为 0。

      分区 { line-height: 0; }

    最简单的用法是将 img 元素更改display为block。

    • -1

相关问题