Question

由于某种原因，我正在为我的图片直接应用padding-right。现在我想将边框样式应用到我尝试使用盒子大小调整方法的图像上，但没有帮助。

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

我同意之前的评论，即保证金将是实现你想做的最好的方式，但是，为了解决谜语，跨度，类和改变你的布局，你可以这样做，同时仍然使用填充而不是边距：在您的html文件中：

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

在你的css文件中：

 span.foobar{
   padding-right: 1em;

 }
img
{
    border: 5px solid red;
}

这个答案是使用你问题中的演示代码做出的。

Answer 2

是的，现在我们可以使用div（您的最新更新） like this

进行处理

div{
    width: 200px;
    position:relative;
}
div:after {
    background: #fff;
    border-left: 5px solid #FF0000;
    content: "";
    height: 134px;
    position: absolute;
    right: -46px;
    top: 0;
    width: 41px;
}

使用伪类应用边框

2 个答案: