html - 如何防止由于填充而导致图像链接区域过多

Question

我想在我网页的左下角有一个图片链接。我能够使链接正常工作，但 padding 中的整个空间也是链接的一部分。所以当我只希望图像本身是一个可点击的链接时，我的页面上几乎有一个 800px x 800px 的大链接。此外，由于整个页面的设置方式，位置需要是绝对的。现在有人能告诉我解决这个问题吗？

<div id="image_link">
    <a href="#">
        <img id="image_id" src="../path/image">
    </a>
</div>

---

<style>
    #image_link {
        padding: 800px 0px 0px 800px;
        position: absolute;
    }
</style>

Answer 1

很奇怪，它为您创建了 800x800 像素的链接区域。 div 上的 padding 在 div 内添加空间，但在 a 之外，因此它不应该使一个元素变大了。

但由于您已经在使用 position: absolute;，您应该真正使用 top、right、bottom 和 left 来控制位置。并且建议直接在img元素上设置。

#image_id {
    position: absolute;
    top: 800px;
    left: 800px;
}