我有以下 HTML：
<ul style="float: right; margin-left: 5px;" id="status-infos">
<li><a id="A"class="button sprite-arrow-circle" ></a></li>
<li>
<a id = "B" class="button">
<img width="16" height="16" src="/Images/control-180.png">
</a>
</li>
</ul>
CSS：
.sprite-arrow-circle{ background-position: 0 0; width: 16px; height: 16px; }
.button { display: inline-block; }
.button, .form legend, .legend, .mini-menu {
border: 1px solid white;
border-radius: 0.417em 0.417em 0.417em 0.417em;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
font-weight: normal;
line-height: 1.333em;
outline: 0 none;
padding: 0.167em 0.5em 0.25em;
text-decoration: none;
text-shadow: none;
}
a.button {
background-color: transparent;
background-image: url(/Images/sprite.png);
background-position: 0 -396px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
id=A 链接上面没有空间，下面有很大的空间。
id=B 链接在中心垂直间隔显示，上下各有一个空格。这看起来很完美。
谁能解释可能发生的事情。似乎只有带有图像的链接以正确的方式垂直间隔。