HTML/CSS 大小链接到图像

Question

我正在尝试与这样的图像建立链接

<a href="http://test.com">
    <img src="image.png" />
</a>

显示正常，但链接的可点击区域比图像大(50px 圆圈)。我只想允许图像区域可点击。我尝试使用以下 css 执行此操作，但无济于事:

a {
    max-width: 50px;
    border-radius: 50%;
}

更改宽度和最大宽度似乎没有效果。执行此操作的最佳方法是什么？

我正在尝试为 this site 底部的圆形联系按钮执行此操作.

Answer 1

解决方案:

#contact a { display: inline-block; }

a 标签占用了父标签的整个 width，因为它被呈现为一个 block，如果你想强制它只呈现它的子内容，您可以使用 inline-block。