图像周围奇怪的填充问题答案

【问题标题】：strange padding problem around image图像周围奇怪的填充问题
【发布时间】：2011-06-05 13:32:13
【问题描述】：

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

【问题讨论】：

【解决方案1】：

与另一个答案相反，它与标记中的空格无关，删除空格不会解决此问题。

问题是图片默认是内联的，垂直对齐的初始值是baseline。这意味着图像被视为页面的任何其他文本组件，并且在文本内容下方为下降保留空间 - 诸如小写“j”等字母的尾部。

要解决这个问题，您要么需要告诉渲染引擎图像不应该被视为文本内容 - .thumb img { display: block; } 会这样做 - 或者您可以告诉渲染引擎不要为后代保留空间，而是将内容与最底部对齐 - .thumb img { vertical-align: bottom; } 会这样做。

编辑：我似乎记得旧版本的 Internet Explorer 错误地处理空格，因此删除空格可能会在那里产生影响，但我上面所说的仍然有效；删除空格不是针对此问题的跨浏览器修复。

【讨论】：

你是对的；希望OP将接受您的答案。我已经从我的回答中删除了错误信息。
这让我整个上午都发疯了，感谢您的修复和出色的解释！

【解决方案2】：

您可以通过在 CSS 中创建 img display:block as seen here 来修复它。

【讨论】：

您能准确地说“删除空间”是什么意思吗？简单地将代码排列在一行中并没有帮助
@denisk，问题与空格无关，请参阅我的回答，了解为什么会发生这种情况以及如何解决。

【解决方案3】：

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

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

【讨论】：