CSS 在 IMG 元素上使用背景和 paddign 在图像周围创建两种颜色的边框
我在网站上看到图像缩略图，带有漂亮的白色 4px 边框和 1 px 灰色边框，如下所示：
我认为他们是通过使用至少 2 个元素（例如 DIV 元素内的 IMG 元素）将 1px 边框应用于 DIV 而不是 IMG 的白色边框（或 DIV 的白色背景加上 DIV 的 4px 填充）来实现的。
但这很酷（至少对我来说我不知道），它们只用一个 IMG 元素将背景和填充直接应用到 IMG 元素即可完成。我不知道你能做到这一点。
img.two_colors_border
{
display: block;
position: relative;
background-color: #ffffff;
border: 1px solid #a9a9a9;
padding: 4px;
}
<img src="dfjdfkj.jpg" class="two_colors_border">
我测试过，它可以在 IE7/8 Chrome Safari 和 FF 上运行。我的问题是：这只是一个 CSS 技巧，但 IMG 元素不应该应用填充/背景，还是我可以放心地自由使用？
谢谢
I saw on a website image thumbnails with a nice white 4px border and a 1 px grey border boundary like the one below:
I thought they were don by using at least 2 elements like an IMG elment inside a DIV element applying the 1px border to the DIV than a white border to the IMG (or white background to DIV plus a 4px padding to the DIV).
But it's cool (at least for me that i did not know) they are done with just one IMG element applying background and padding drirectly to the IMG element. I did not know you could do this.
img.two_colors_border
{
display: block;
position: relative;
background-color: #ffffff;
border: 1px solid #a9a9a9;
padding: 4px;
}
<img src="dfjdfkj.jpg" class="two_colors_border">
I tested and it works on IE7/8 Chrome Safari and FF. My question is: is this just a CSS trick but IMG element are not supposed to have a padding/background applied, or is this something I can freely use without worries?
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
没关系。图像等替换元素与任何其他元素一样具有填充和边框。
图像上的填充在 IE5 中不起作用，因此在 IE6 及更高版本的 Quirks 模式下不起作用。但显然，没有人再担心 IE5，也没有人应该在任何现代网站中使用 Quirks。
It's fine. Replaced elements like images have padding and border like any other element.
Padding on images doesn't work in IE5, or consequently in Quirks Mode in IE6 and later. Clearly though, no-one worries about IE5 any more, and no-one should be working in Quirks in any modern web site.
在 img 中使用填充是正常的，但在
ie6及以下版本中会出现问题。以前使用 hspace 和 vspace，但某些浏览器不支持。查看其兼容性Using padding with img is normal but makes problem with
ie6and below .Previously hspace and vspace used but its not supported by some browsers. see its compatiability