内部出现未知空白没有填充或边距
我在构建的设计中遇到了一个奇怪的空白问题。
我创建了一个
![]()
来源：
<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 中的迷你重置中，
![]()
![]()
我添加了以下 CSS 来显示每个元素周围的边框：
.votebox * {
border: 1px #000 solid;
}
这就是它在 Firefox 3.6 中的显示方式（是的，这些是 StackOverflow 投票图像。我暂时使用它们作为占位符）：
现在，这个问题的明显答案是简单地设置“投票”类以具有明确的图像高度（我会这样做，甚至可能选择 CSS 精灵而不是
有人能为我解释一下吗？
编辑：Steve H 向我指出，我应该使用轮廓而不是边框来显示元素的外边缘。我已经进行了更改，并且还分隔了 CSS 中的元素，以便它们各自显示为不同的颜色。
新的轮廓如下所示：
正如你所看到的，这个问题与我想象的有点不同。看起来图像下方有一些空白，但底部图像似乎稍微渲染在其包含的
I'm having an odd issue with whitespace in a design I'm building.
I created a <div> to contain voting elements - it holds an upvote button, downvote button, and vote total, each inside their own <div> element, and using <img> for the buttons.
Source:
<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>
In the mini-reset in my CSS, both <div> and <img> elements are defined to display without margins or padding, and FireBug confirms these specific elements have no margins or padding, but I'm seeing whitespace being added between the bottoms of the <img> elements and the bottom of their respective containing ` elements.
I added the following CSS to display a border around each element:
.votebox * {
border: 1px #000 solid;
}
and this is how it displayed in Firefox 3.6 (yes, those are StackOverflow vote images.. I'm using them as placeholders for the moment):
Now, the obvious answer to this problem is to simply set the "vote" class to have an explicit height of the images (and I will do this, possibly even opting for CSS sprites over <img>s), but I'm much more interested in learning why these elements are displaying in this manner (this is supposed to be a self-teaching project after all).
Can anyone shed some light on this for me?
Edit: Steve H has pointed out to me that I should be using outline, rather than border, to show the outer edges of elements. I've made that change, and also separated the elements in CSS so they each display as a different colour.
The new outline looks like this:
As you can see, the issue is a bit different than I thought. It looks like there is some whitespace below the image, but this is compounded by the fact that the bottom image seems to be rendered slightly outside its containing <div>. This seems weird to me.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
HTML 中的图像是内联元素，默认情况下放置在字体基线上，因此您看到的可能是下行部分的空间。解决这个问题的常用方法是将它们设置为
display: block或vertical-align: Bottom。编辑：顺便说一句，您可以像任何其他元素一样使用 CSS 格式化图像，因此您很可能可以在图像周围删除额外的
div。Images in HTML are inline elements and are by default placed on the font base line, so what you are seeing is probably the space for the descenders. The usual way around this is either setting them to
display: blockorvertical-align: bottom.EDIT: BTW, you can format images with CSS just like any other element, so you can mostly likely drop the extra
divs around the images.您使用严格的文档类型，所以
应该可以解决问题
Your using a strict doctype, so
Should do the trick
取决于您使用的文档类型。如果您使用 Transitional (
）它将按照您想要的方式显示。过渡示例：http://jsbin.com/icesi
严格示例：http://jsbin.com/icesi/2
以下是可能帮助您理解问题的相关声明
来源：http://oreilly.com/pub/a/javascript/synd/2001/08/28/doctype.html?page=2
Depends on the doctype you use. If you use Transitional (
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) it will be shown in the way you want.example with transitional: http://jsbin.com/icesi
example with strict: http://jsbin.com/icesi/2
A related statement that may help you understand the issue is the following
Source: http://oreilly.com/pub/a/javascript/synd/2001/08/28/doctype.html?page=2