html - anchor 图像和文本高度不正确

我正在尝试使用内部文本和图像作为链接来创建一个选项卡。我面临的问题是锚的尺寸和/或位置似乎与图像不同。正如您在jsfiddle链接中看到的那样，图像底部和div底部之间有一定的间距，我不知道为什么会有间距。

JSFiddle link



如果您无法访问该链接，请使用HTML代码：

<div id="SapDataBtn">
    <a href="#">
        <img runat="server" src="http://i.cubeupload.com/Tm2tPF.png" />
    </a>
    <a href="#" id="SapBtnText">
        Data
    </a>
</div>

CSS：

#SapDataBtn {
  background-color: #c7ddf2;
  text-align: center;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding-left: 15px;
  padding-right: 15px;
  width: 90px;
}
#SapDataBtn a:link,
#SapDataBtn a:visited,
#SapDataBtn a:hover,
#SapDataBtn a:active {
  font-size: 15px;
  font-weight: bold;
  color: #19456e;
  text-decoration: none;
}
#SapDataBtn img {
  border-style: none;
}

最佳答案

在您的vertical-align:bottom;中添加#SapDataBtn img，这应该可以解决问题:)