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

Question

我正在尝试创建一个以内部文本和图像作为链接的选项卡。我面临的问题是 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;
}

Answer 1

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