html - 如何在 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>

希望这对您有所帮助!