为什么我的图像有额外的间距？

Question

有谁能告诉我是什么原因导致图像下面的空间？在div中似乎有额外的填充，红色边框与图像有关。我根本无法在萤火虫中找到这个间距。

束手无策。

alt text http://antony.co.za/so.jpg

Answer 1

默认情况下，图像将其底边与文本的基线对齐。你看到的那个空间是基线以下的空间，被q，p，y等下行器使用（事实上你没有文字是无关紧要的 - 它们的空间仍然是保留的。）

你可以像这样摆脱它：

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}

Answer 2

它可能是垂直对齐 - 检查计算出的样式以查看图像的当前状态，然后尝试将其添加到样式表中：

img { vertical-align: text-bottom; }

有关正在发生的事情的一些示例，请参阅That mysterious gap under images和What is Vertical Align。

Answer 3

可能填充相关，也许是包含图像的div？如果你发布链接，可能会有所帮助。如果可能的话。

Answer 4

使用vertical-align bottom是一种有效的解决方案。

由于您似乎没有使用与文本内联的图像，我采用的方法是使图像块级元素：

img {
    display: block;
}