html - 减少HTML中的 anchor 点击区域

在我当前的网站上，我有一个横幅图像，在其中减小了下边距，以便使下面的内容在页面上更上一层。标语上还带有锚标记，以链接到“主页”页面。

但是，锚的命中面积并未相应减小。由于否定填充是无效的，并且我的谷歌搜索没有任何效果，因此我在这里寻求建议。

有没有办法减少锚标签的命中面积？



相关HTML：

  <a class="site-title" href="/">
    <img class="logo" src="logo.svg" alt="Logo">
  </a>

相关CSS：

.logo {
  margin-bottom: -26px;
}

最佳答案

可以这样做的一种方法是将图像与链接分开，而仅将链接/单击区域作为图像上方的覆盖层，以便您可以独立于可单击区域来控制图像的位置和尺寸。例如...

HTML：

<div class="image">
  <img src="logo.svg">
  <a href="/"></a>
</div>

CSS：

.image{ position: relative; margin-bottom: -26px; }
.image a{ position: absolute; display: block; width: 100%; height: calc(100% - 26px); }

另外，您也可以使用z-indexing，但是我认为这种方法可能是最干净的，因为徽标确实与设计/屏幕截图中的条重叠。