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

我有一个网页，用下面的代码图像：如何在img和其box-shadow之间添加填充？

<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的空间。

来源

2016-12-15 Andrew Perry

...我发现这个问题。我一直在编辑我们的SharePoint页面，并在我的电脑上刷新页面。难怪它没有更新。嗯，我们都需要一个令人尴尬的编码偶尔失败。 ;-) –

尽管如此，@ Saurav的解决方案比我之前做的更加清洁，所以最终都是如此。 :-D –

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

希望这有助于！

来源

2016-12-15 13:28:02

很好地工作，谢谢，并且抛光代码也有点！ –

@AndrewPerry我的荣幸！ –

填充工作正常。

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

https://jsfiddle.net/5Lpm44h0/

来源

2016-12-15 13:31:44

谢谢 - 它的确如此。原来，我一直在编辑一个文件，刷新另一个文件，并想知道为什么没有任何东西似乎改变它......谢谢！ –

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

回答

相关问题