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>

希望这有帮助！

Answer 2

Padding工作正常。

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

https://jsfiddle.net/5Lpm44h0/

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

2 个答案: