图像周围有奇怪的填充问题

Question

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

Answer 1

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

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

要解决此问题，您需要告诉渲染引擎不应将图像视为文本内容 - .thumb img { display: block; }将执行此操作 - 或者您可以告诉渲染引擎不要为下降器保留空间，而是将内容对齐到底部 - .thumb img { vertical-align: bottom; }将执行此操作。

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

Answer 2

您可以通过在CSS as seen here中制作img display:block来解决此问题。

Answer 3

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

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