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

Joh*_*ohn 6 html css border padding

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

Jim*_*Jim 10

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

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

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

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


Phr*_*ogz 6

您可以通过display:block在CSS中创建img来修复它,如此处所示.