Html 增加悬停时的背景色高度

我正在使用html5-boilerplate_v8制作一个静态HTML网页，遇到了一个障碍

我已经添加了4个社交媒体图标，使用透明背景的PNG，我希望图像的背景在悬停时变成白色

现在，一个图标的HTML如下所示：

<div class="channels">
      <a class="channels__item" href="https://www.facebook.com/person.name" target="_blank"><img
          src="img/icons8-facebook-50.png" alt="facebook" width=40 height=40></a>

.channels {
  margin: 0 auto;
  padding-top: 10px;
}

.channels__item {
  margin-left: 5px;
  margin-right: 5px;
}

.channels__item:hover {
  background-color: #fff;
}

当我将鼠标悬停在图标上时，宽度是正确的，但高度只有图标的一半左右（同时居中于图标的中间）

相反，我需要高度从图标的顶部延伸到底部，这与宽度的表现方式一致

我见过类似的问题问导航菜单（设置为无序列表），但正如你所看到的，我的场景应该简单得多

可悲的是，经过多次尝试，唯一有效的方法就是在悬停状态中添加10px的填充。这看起来还行，但当鼠标悬停在上面时，图标会水平移动（这看起来很可笑）。而且，它感觉很粗糙，我相信一定有更好的方法

---

我很确定这个高度是根据文本大小而不是图标大小来确定的，但是出于某种原因，我不知道如何修复它。谢谢你的建议

使用

显示：内联块在
.channels\u项目
类中。
有关显示标记的详细信息
.channels{
保证金：0自动；
填充顶部：10px；
}
.channels\uuu项目{
左边距：5px；
右边距：5px；
显示：内联块；
}
.channels\u项目：悬停{
背景色：rgb（209,32,32）；
}


谢谢Hansaka-我尝试了很多方法，但显然不是其中之一，因为您的解决方案工作得非常好！