我在制作一个设计时遇到了奇怪的空格问题。
我创建了一个<div>来容纳投票元素 - 它包含一个上投票按钮、一个下投票按钮和一个投票总数，每个元素都在自己的<div>中，并使用<img>作为按钮。
来源：
<div class="votebox">
<div class="vote"><img src="upvote.png" /></div>
<div class="votetotal">15</div>
<div class="vote"><img src="downvote.png" /></div>
</div>
<div>和<img>元素都被定义为没有外边距或内边距，并且FireBug确认这些特定元素没有外边距或内边距，但我看到在<img>元素底部和它们各自所包含的 ` 元素底部之间添加了白色空格。我添加了以下CSS以显示每个元素周围的边框：
.votebox * {
border: 1px #000 solid;
}
这是 Firefox 3.6 中的显示效果（是的，那些是 StackOverflow 的投票图像...我暂时将它们用作占位符）：
显然，解决这个问题的明显方法是简单地将 "vote" 类设置为具有图像高度的显式高度（我会这样做，甚至可以选择使用 CSS sprite 而不是 <img>），但我更感兴趣的是学习为什么这些元素以这种方式显示（毕竟这应该是一个自学项目）。
有谁能为我解释一下吗？
编辑：Steve H 指出我应该使用 outline 而不是 border 来显示元素的外边缘。我已经做出了更改，并在 CSS 中分离了元素，使它们每个显示为不同的颜色。
新的轮廓如下：
正如你所看到的，问题与我想象的有点不同。看起来图像下面有一些空白，但这被事实上底部的图像似乎在其包含的 <div> 外部略微呈现所复杂。这对我来说似乎很奇怪。