减少html中的锚点命中区域

Question

在我当前的网站上，我有一个横幅图片，我减少了底部边距，以便下面的内容在页面上进一步向上移动。横幅上还有一个锚标记，用于链接到“主页”页面。

然而，锚的击中区域并未相应减少。由于负填充无效，我的谷歌搜索没有任何结果，我在这里征求意见。

有没有办法减少锚标记的命中区域？

相关的Html：

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

相关CSS：

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

Answer 1

可以做到的一种方法是将图像与链接分开，只需将链接/点击区域作为图像顶部的叠加层，这样就可以控制图像定位和图像。尺寸与可点击区域无关。例如......

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，但我认为这种方法可能是最干净的，因为徽标与设计/屏幕截图中的栏重叠。

Answer 2

<强>更新

看到有关图像链接的具体问题。编辑相应。对于链接，请添加position:relative和z-index:1或更高版本。而不是使用负边距，使用bottom属性来移动链接。我添加了title属性以证明所有链接都已公开，只是将鼠标悬停在链接上，您会注意到不同的标题。

<小时/> 抛弃空元素（即<img>），然后使用<a>

制作inline-block nchor background-image

<强>段

header {
  height: 50px;
}

.logo {
  width: 50px;
  height: 100%;
  background: url(http://imgh.us/gir_zim.gif)no-repeat;
  background-size: contain;
  display: inline-block;
}

nav {
  position: relative;
  z-index: 1;
  bottom: 15px;
}

<header class='site-title'>
  <a class="logo" href="#/" title='logo'></a>
  <nav><a href='#/' title='link1'>LINK1</a>&nbsp;<a href='#/' title='lin2k'>LINK2</a></nav>
</header>