如何在img及其box-shadow之间添加填充？

Question

我在网页中有图像,代码如下:

<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>

图像使用以下CSS设置样式:

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

图像的边缘正对着边缘,当它们融入阴影时,它们变得非常难以看到; 不幸的是,更改图像不是一个选项,所以我需要在图像和阴影之间添加一些空间.

我已经尝试在侧面添加一些额外的空间style="padding: 1em;"等,但没有任何明显的区别.margin似乎也没有影响它.

有什么想法吗？理想情况下,我想在图片的左侧和右侧添加大约1em的空间.

Answer 1

给出box-shadow的<a>标签,而不是图像,然后给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>

希望这可以帮助!