点击式图片图标底部出现不可见<a>标签，如何消除？

我做了几个可点击的图片按钮，外观如下：

按钮的边距范围如图所示：

现在按钮底部有一块额外的可点击<a>标签区域，这块区域在上述边距范围内，和按钮边框内的实际可点击部分是分开的，我想把它去掉：

我的React组件代码：

const Smallbuttons = () => {
  return (
    <div id="smallbuttons">
      <a
        href="https://github.com/"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img id="github" src={require("./github.png")} alt="Github" />
      </a>
      <a
        href="https://www.linkedin.com/"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img id="linkedin" src={require("./linkedin.png")} alt="LinkedIn" />
      </a>
    </div>
  );
};
export default Smallbuttons;

对应的CSS代码：

#github, #linkedin {
  margin: 2rem 1rem;
  height: 3vh;
  width: auto;
  border-radius: 50%;
  border: 1px solid white;
  padding: 0.3rem;
  cursor: pointer;
}
#smallbuttons img:hover {
  border: 1px solid #d4af37;
}

解决方法 #

问题根源是<a>作为行内元素，默认会保留图片下方的基线留白，导致<a>标签整体高度大于图片，多出可点击区域。以下几种方式可以解决：

1. 让<a>标签尺寸完全贴合图片

把<a>设为行内块级元素，将原本给图片的外边距移到<a>上，消除留白：

#smallbuttons a {
  display: inline-block;
  line-height: 0;
  margin: 2rem 1rem;
}

#github, #linkedin {
  /* 移除图片自身的margin */
  height: 3vh;
  width: auto;
  border-radius: 50%;
  border: 1px solid white;
  padding: 0.3rem;
  cursor: pointer;
}

2. 对齐<a>标签和图片底部

无需改变元素类型，给<a>添加垂直对齐样式：

#smallbuttons a {
  vertical-align: bottom;
}

3. 使用Flex布局管理按钮

给父容器设置Flex布局，自动消除行内元素留白问题：

#smallbuttons {
  display: flex;
  gap: 2rem; /* 用gap控制按钮横向间距 */
}

#github, #linkedin {
  margin: 2rem 0; /* 仅保留上下外边距 */
  height: 3vh;
  width: auto;
  border-radius: 50%;
  border: 1px solid white;
  padding: 0.3rem;
  cursor: pointer;
}

内容的提问来源于stack exchange，提问作者dkevil11