图像周围奇怪的填充问题
我有一个奇怪的问题。我想在图像周围添加边框，但它在底部显示了一些空间。请看这里：http://jsfiddle.net/4WKJY/ 我不想设置固定的高度和宽度。感谢您的任何帮助。
I'm having a strange problem. I want to put border around the image, but it is showing some space at the bottom. Please have a look here: http://jsfiddle.net/4WKJY/
I don't want to put fixed height and width. Thanks for any help.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
与其他答案相反，它与标记中的空格无关，删除空格并不能解决这个问题。
问题是图像默认是内联的，并且垂直对齐的初始值为
baseline。这意味着图像被视为页面的任何其他文本组件，并且在文本内容下方为下行保留空间 - 小写“j”等字母的尾部。要解决此问题，您需要告诉渲染引擎认为图像不应被视为文本内容 -
.thumb img { display: block; }会执行此操作 - 或者您可以告诉渲染引擎不要为下降部分保留空间，而是将内容对齐到最底部 -.thumb img {vertical-align: Bottom; }将执行此操作。编辑：我似乎记得旧版本的 Internet Explorer 错误地处理空格，因此删除空格可能会产生影响，但我上面所说的仍然有效；删除空格并不能解决此问题的跨浏览器问题。
Contrary to the other answer, it has nothing to do with whitespace in the markup, and removing the whitespace won't fix this.
The problem is that images are inline by default and the initial value for vertical alignment is
baseline. This means that the image is treated as if it were any other textual component of the page, and space is reserved beneath textual content for descenders - the tails on letters like lowercase 'j' etc.To fix this, you either need to tell the rendering engine that the image shouldn't be treated like textual content -
.thumb img { display: block; }will do this - or you can tell the rendering engine not to reserve space for descenders, and instead align the content to the very bottom -.thumb img { vertical-align: bottom; }will do this.Edit: I seem to recall that old versions of Internet Explorer incorrectly handle whitespace, so removing the whitespace may have an effect there, but what I said above still stands; removing the whitespace is not a cross-browser fix for this problem.
您可以通过在 CSS 中添加 img
display:block来修复此问题，如下所示< /a>.You can fix it by making the img
display:blockin your CSS, as seen here.或者，仅将 CSS 应用于图像：
Alternatively, apply the css only to images: