图像周围出现奇怪的填充问题

Question

我遇到了一个奇怪的问题。我想在图片周围放置边框，但是底部显示了一些空间。请看这里：http://jsfiddle.net/4WKJY/。我不想设置固定的高度和宽度。谢谢任何帮助。

- John

Answer 1

与其他答案相反，与标记中的空格无关，移除空格不会修复此问题。

问题在于，图像默认为行内元素，垂直对齐的初始值为“基线”(baseline)。这意味着，图像被视为页面中任何其他文本组件一样，并且为下降字母保留了文本内容下方的空间，例如小写字母'j'等的尾巴。

要解决此问题，您需要告诉渲染引擎，图像不应该像文本内容一样处理。使用CSS规则".thumb img { display: block; }"可以实现此目的，或者您可以告诉渲染引擎不为下降字母保留空间，而是将内容对齐到底部。使用CSS规则“.thumb img { vertical-align: bottom; }”可以实现此目的。

编辑：我似乎记得旧版的Internet Explorer不能正确处理空格，因此删除空格可能会产生影响，但以上所说仍然适用；移除空格不是此问题的跨浏览器修复方法。

- Jim

---

没错，希望楼主能把采纳答案改成你的。我已经从我的回答中删除了错误信息。 - Phrogz

今天早上这个问题让我抓狂了，感谢你的修复和清晰的解释！ - brooklynsweb

Answer 2

您可以通过在CSS中使img display:block来修复它，如此所示。

- Phrogz

---

你能具体说明一下“去除空格”的意思吗？仅仅将代码排成一行并不能解决问题。 - Denys Kniazhev-Support Ukraine

@denisk，这个问题与空格无关，请查看我的答案以了解原因和解决方法。 - Jim

Answer 3

或者，仅将CSS应用于图像：

.thumb img{
position: relative;
padding:2px;
float: left;
margin: 0px 0px 5px 5px;
border: solid 1px #ccc; 
}

- Jay