悬停时图像的底部边缘出现一条白线答案

【问题标题】：A white line is appearing on bottom edge of the image on hover悬停时图像的底部边缘出现一条白线
【发布时间】：2021-04-08 17:34:26
【问题描述】：

我遇到了出现在“div 类库”内每个图像底部的白色像素线的问题。鼠标悬停时出现白线[我在悬停时包含了变换元素]

此外，这些图像仅包含在“galary”和“photo”类中，而不包含在任何其他类中。

代码如下：

div.photo {
  height: 2rem;
  transition: transform .2s;
}

.photo:hover {
  transform: scale(0.9);
  cursor: pointer;
  box-shadow: 15px 15px 15px;
}

.gallary {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-gap: 2em;
}

<div class="gallary">
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=1"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=2"></div>
  <div class="photo"><img src="https://source.unsplash.com/300x200?v=3"></div>
</div>

【问题讨论】：

标签： html css hover css-transitions transform

【解决方案1】：

从 .photo 中删除 box-shadow 并添加到图像中：

 div.photo {
height: 2rem;
transition: transform .2s;
}
.photo:hover {
transform: scale(0.9);
cursor: pointer;
}
.photo:hover img{
  box-shadow:  15px 15px 15px;
}
.gallary {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 2em;
}

    <div class="gallary"> 
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
      <div class="photo"><img src="https://e0.365dm.com/20/12/768x432/skysports-messi-barcelona-la-liga_5220695.jpg?20201228082630"></div>
    </div>

【讨论】：

【解决方案2】：

尝试将图像放在有边框的<div> 元素中，您会在图像底部看到一个额外的空白区域（大约 3 像素）。发生这种情况是因为图像是内联元素，因此浏览器会在基线下添加一些空白来调整其他内联元素。摆脱这种情况的最简单方法是将图像的默认显示值从 inline 更改为 block，即将样式 display: block; 应用于图像。

【讨论】：