imgとそのボックスシャドウの間にパディングを追加するにはどうすればよいですか？

Question

は、私は次のコードを使用して、Webページ内の画像を持っている：

イメージは、以下のCSSでスタイル設定され

<a href="../images/Stacking_StackProcess_marked.png" target="_blank"><img src="../images/Stacking_StackProcess_marked.png" alt="Per line stacking calculation" width=600 height=520></img></a> 

：

img { 
    box-shadow: 0.3em 0.3em 1em rgba(132,133,137,0.4); 
} 

画像が右端に対してアップラインを持っている、とのように、彼ら影に溶け込み、見ることが非常に困難になります。残念ながら画像を変更することは選択肢ではないので、画像と影の間にスペースを追加する必要があります。

style="padding: 1em;"などで余分なスペースを追加しようとしましたが、目に見える違いはありません。 marginはどちらにも影響していないようです。

どのような考えですか？理想的には、画像の左右に約1emのスペースを追加したいと考えています。

Answer 1

代わりに画像の<a>タグにbox-shadowを与え、それにpaddingを与え、ちょうど好き：

：

a { 
    display: inline-flex; /* Or you can use 'inline-block' */ 
    box-shadow: 0.3em 0.3em 1em rgba(132,133,137,0.4); 
    padding: 5px; 
} 

は以下のスニペット（ 使用フルスクリーン）を見てください

a { 
 
    display: inline-flex; /* Or you can use 'inline-block' */ 
 
    box-shadow: 0.3em 0.3em 1em rgba(132,133,137,0.4); 
 
    padding: 5px; 
 
}

<a href="../images/Stacking_StackProcess_marked.png" target="_blank"><img src="http://placehold.it/500x500" alt="Per line stacking calculation" width=600 height=520></img></a>

これが役立つことを願っています！

Answer 2

パディングが正常に機能しています。

img { 
    padding:20px; 
    box-shadow: 0.3em 0.3em 1em rgba(132,133,137,0.4); 
} 

https://jsfiddle.net/5Lpm44h0/