如何在保留webkit框阴影的同时使图像有填充？

Question

我想在我的网站上的所有图片的样式，有框-阴影和填充10 up，这样文字是不光滑的对他们。但是，当我用CSS将任何填充分配给"img“时，框影将在填充的边缘绘制，在图像周围留下10 to空白。

#content img {
    -moz-box-shadow: 0 0 5px 2px #282a2d;
    -webkit-box-shadow: 0 0 5px 2px #282a2d;
    padding:10px
}

这个特定的图像被浮动在段落中。这是我问题的一个例子-

​

​

有什么想法吗？

编辑：我不想要填充。我只想要框影，然后是空格，这样文字就不会在框影旁边混在一起了。原来我想要的是保证金而不是填充。愚蠢的错误。

Answer 1

除了使用margin之外，还要使用padding

#content img {
    box-shadow: 0 0 5px 2px #282a2d;
    padding: 10px;
    margin-right: 10px;  
}

Answer 2

给出相同颜色的背景

#content img {
    -moz-box-shadow: 0 0 5px 2px #282a2d;
    -webkit-box-shadow: 0 0 5px 2px #282a2d;
    background: #282a2d;
    padding:10px;
}

演示

更新：

正如在评论中提到的，OP似乎也没什么问题。所以，我会完成我的答案。

#content img {
    -moz-box-shadow: 0 0 5px 2px #282a2d;
    -webkit-box-shadow: 0 0 5px 2px #282a2d;
    margin:10px
}

Answer 3

@zellio的答案对我无效，所以我通过添加两个元素来解决这个问题。

<div class="with-padding>
<div class=with-shadow>
...
</div>
</div>

.with-padding {
padding = 10px;
}

.with-shadow {
  box-shadow: 0 0 5px 2px #282a2d;
}