使用僞類應用邊框

由於某種原因，我正在直接對圖像應用填充。現在我想要應用邊框樣式，但是完全適用於我嘗試使用盒子大小調整方法的圖像，但沒有任何幫助。使用僞類應用邊框

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/

來源

2014-03-05 Bhojendra Nepal

嘗試使用'，而不是'浸軋right' –

但在我來說，我已經到保證金right'使用填充！ –

填充和邊距幾乎看起來相同，除了填充位於邊框內部和邊距位於邊框外邊這一事實 – SajithNair

我同意以前的意見，保證金是實現你想要完成的最好方法，但爲了解決謎題，跨度和課程，和改變你的佈局，你可以這樣來做，而仍然使用的填充，而不是利潤：在您的HTML文件：

span.foobar{ 
    padding-right: 1em; 

} 
img 
{ 
    border: 5px solid red; 
}

：

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

在你的CSS文件

此答案是使用您問題中的演示代碼製作的。

來源

2014-03-05 05:38:35 Eric

我需要做，而不需要修改html。不管怎麼說，還是要謝謝你。 –

是現在我們可以在它與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; 
}

來源

2014-03-05 05:47:35 Era

不適用於我的情況，所以我完全需要使用圖像標記。 –

@ C-link：查看我的更新。 – Era

但div還包含更多圖片和標題。 –

使用僞類應用邊框

回答

相關問題