css - 使用伪类应用边框

Question

出于某种原因，我直接为我的图像应用 padding-right。现在我想应用边框样式，但完全应用到我尝试了 box-sizing 方法但没有帮助的图像。

img{
    padding-right: 1em;
    border: 5px solid red;
}


<img src='path.jpg' />

demo

不应删除填充，但应将边框精确应用到图像边界。我该怎么做？

---

更新:

有什么想法让它像伪类之后一样工作。

img:after{
    content: " ";
    border: 5px solid red;
    width: 100%;
    height: 100%;
}

---

在图像前应用边距或添加跨度在我的情况下不起作用，因为我的想法是将图像设置为 width: 100%;。这是一个示例演示:http://jsfiddle.net/Ab77g/17/

Answer 1

我同意之前的评论，即 Margin 是实现您想要完成的目标的最佳方式，但是，为了解决这个难题，使用 span 和 class 以及对布局的更改，您可以这样做，同时仍然使用填充而不是边距:在你的 html 文件中:

<span class=foobar><img src="path.jpg" /></span>

在你的 CSS 文件中:

 span.foobar{
   padding-right: 1em;

 }
img
{
    border: 5px solid red;
}

此答案是使用您问题中的演示代码做出的。