Html 图形元素上的框阴影由于根边距而倾斜

我在

figure

元素上提供了一个

box阴影。但是，由于我给出的
*{margin:10px}
，图像出现了倾斜。有没有什么方法可以让我仍然保持这个边距，并且能够将长方体阴影仅仅放在图形元素上

HTML:

JSFIDLE在这里：

正如您的第一条评论所说，您希望图片显示在阴影框中，因此您只需删除即可

#pic2{
padding-left: 50px;
}

我也不觉得这有什么用

*{
   margin: 10px;
   /* padding: 10px; */
}

把它也去掉

结果：
您到底想要什么输出。您能给我们看一张图像吗？我不能显示图像。我只想让图像只出现在有阴影的盒子里。像这样的东西：？是的。但是，我想要保持边距，并且仍然想要另一个pic实际上，
#pic2
中左边的
填充是为了处理我要做的pic1的旋转，并在pic1之后给pic2一些空间。此外，还使用了
边距
，以便所有内容都在左侧的某个空格后开始，例如，facebook时间线始终与左侧保持一定距离
#pic2{
padding-left: 50px;
}

*{
   margin: 10px;
   /* padding: 10px; */
}