html - 图像 href 大于图像本身。不知道如何解决？

Question

我正在为学校制作我的作品集，我们必须使用 github 来制作它。我似乎无法弄清楚如何减小 href 可点击链接的大小以匹配实际图像的大小。出于某种原因，它比应有的大得多，所以即使我的鼠标远离图像，我最终也会点击链接。

这是我的图像的html代码：

<div class="icons">
  <a href="assets/Flood.mp4" onclick="lightbox_open();"><img src="assets/Floodbw.png" alt="flood" style="float: right; width: 20%; margin-right: -0.5%; margin-left: -0.25%; margin-bottom: -0.5%;">
  <a href="assets/project_2_documentation_edit_2.mp4" onclick="lightbox_open();"><img src="assets/Dependencybw.png" alt="Dependency" style="float: right; width: 20%; margin-right: -0.5%; margin-left: -0.25%; margin-bottom: -0.5%;">
  <a href="assets/project1.mp4" onclick="lightbox_open();"><img src="assets/Disposalbw.png" alt="Disposal" style="float: right; width: 20%; margin-right: -0.5%; margin-left: -0.25%; margin-bottom: -0.5%;"></a>
  <p style="clear: both;">
</div>
<div class="icons2">
  <a href="assets/Seamstress.mp4" onclick="lightbox_open();"><img src="assets/Buttonsbw.png" alt="buttons" style="float: right; width: 30.1%; margin-right: -0.72%; margin-left: -0.5%; margin-top: -1.8%; margin-bottom: -0.8%;">
  <a href="assets/Narrative.mp4" onclick="lightbox_open();"><img src="assets/Bitterbw.png" alt="Bitter;">
</div>

这是我的CSS代码：

.icons{
  margin-top: -0.5%;
}

.icons2 img{
  float: right; width: 30.1%; margin-right: -0.72%; margin-left: -0.5%; margin-top: -1.8%; margin-bottom: -0.8%;
}

这是我的作品集的链接（其他页面上仍在进行中）： https ://elizabethnnguyen.github.io/digitalworks.html

我指的图像是视频作品部分下的花童和按钮的红色和蓝色图像。

标签： htmlcssgithubatom-editorportfolio