显示在<div>内部的未知空格,没有填充或边距

Question

在我正在构建的设计中,我遇到了一个奇怪的问题.

我创建了一个<div>包含投票元素 - 它包含一个upvote按钮,downvote按钮和投票总计,每个都在他们自己的<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>

在我的CSS中的迷你重置中,两个<div>和<img>元素都被定义为没有边距或填充显示,并且FireBug确认这些特定元素没有边距或填充,但我看到在<img>元素的底部和底部之间添加了空格它们各自包含的元素.

我添加了以下CSS来显示每个元素周围的边框:

.votebox * {
  border: 1px #000 solid;
}

这就是它在Firefox 3.6中的显示方式(是的,那些是StackOverflow投票图像..我现在用它们作为占位符):

现在,这个问题的明显答案是简单地将"投票"类设置为具有明确的图像高度(我会这样做,甚至可能选择CSS精灵而不是<img>s),但我对它更感兴趣了解为什么这些元素以这种方式显示(毕竟这应该是一个自学项目).

任何人都可以为我阐明这一点吗？

---

编辑:史蒂夫H向我指出,我应该使用轮廓而不是边框​​来显示元素的外边缘.我做了这个改变,并且还将CSS中的元素分开,这样它们每个都显示为不同的颜色.

新大纲如下所示:

如您所见,问题与我想的有点不同.看起来图像下面有一些空白,但是底部图像似乎略微在其包含之外呈现这一事实<div>.这对我来说似乎很奇怪.

Answer 1

HTML中的图像是内联元素,默认情况下放在字体基线上,因此您看到的可能是下划线的空间.通常的方法是将它们设置为display: block或vertical-align: bottom.

编辑:顺便说一句,您可以像使用任何其他元素一样使用CSS格式化图像,这样您几乎可以放弃div图像周围的额外内容.