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

时间:2011-01-07 21:56:19

标签: html css border padding

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

3 个答案:

答案 0 :(得分:10)

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

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

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

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

答案 1 :(得分:6)

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

答案 2 :(得分:0)

或者,仅将css应用于图像:

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