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