【发布时间】：2011-05-01 19:48:27
【问题描述】：
我在构建的设计中遇到了一个奇怪的空白问题。
我创建了一个 <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>
在我的 CSS 中的 mini-reset 中，<div> 和 <img> 元素都被定义为不显示边距或填充，FireBug 确认这些特定元素没有边距或填充，但我看到添加了空格在<img> 元素的底部和它们各自包含的 ` 元素的底部之间。
我添加了以下 CSS 来显示每个元素周围的边框：
.votebox * {
border: 1px #000 solid;
}
这就是它在 Firefox 3.6 中的显示方式（是的，这些是 StackOverflow 投票图像。我暂时将它们用作占位符）：
现在，这个问题的明显答案是简单地将“投票”类设置为具有明确的图像高度（我会这样做，甚至可能选择 CSS 精灵而不是<img>s），但我很喜欢更有兴趣了解为什么这些元素以这种方式显示（毕竟这应该是一个自学项目）。
谁能帮我解释一下？
编辑：Steve H 向我指出，我应该使用轮廓而不是边框来显示元素的外边缘。我进行了更改，并将 CSS 中的元素分开，使它们各自显示为不同的颜色。
新大纲如下所示：
如您所见，这个问题与我想象的有点不同。看起来图像下方有一些空白，但由于底部图像似乎稍微超出了包含<div> 的位置，这使情况更加复杂。这对我来说似乎很奇怪。
【问题讨论】：
-
[Just a tip] 当调试这样的问题时，通常最好使用轮廓而不是边框，这是因为边框会增加对象的整体宽度/高度，而轮廓只会标记外围地区。
-
不知何故，我不知道大纲。我知道进入这个边界会增加元素的宽度/高度，但认为这不是问题，因为我已经用萤火虫检查了所有东西，只是希望能够一次看到多个元素，而不是一个一次与萤火虫。有趣的是，轮廓和边框看起来彼此不同，并且有一条我无法识别的轮廓线（使用 firebug 检查时不会出现在任何元素的边缘）。
标签： html css image rendering whitespace