为什么图像到边框底部有间隙？

Question

我正在研究两种图像样式，但这里遇到了一个恼人的问题，可能是因为我还不太了解。我想做的是在第一个图像上获得第二个图像，就像贴纸一样（如果你看到底部的 jsFiddle 你会理解更多）

问题是，从我的默认 CSS 中，我在博客上上传的每张图像上都有一个border:2px solid #fff（圆形）。但我不希望将此 CSS 应用于第一个图像前面的第二个图像。

<style>我通过使用帖子上的标签覆盖默认 CSS 来做到这一点。

.post img {border: 0px solid #fff; //default : 2px solid;
-moz-box-shadow:none ; // default ....
-webkit-box-shadow:none ; // default ....
box-shadow:none } // default ....
body { background-color:black;
}

另外，在第一张图片上，我再次添加样式，例如

style="clear: left; float: left; margin-bottom: 1em; border: 2px solid #fff!important;-moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, .8);
box-shadow: 3px 3px 10px rgba(0, 0, 0, .8); margin-right: 1em;

这样，CSS 就会被覆盖，因此不会在任何图像上应用边框或阴影，但第一个图像会通过其样式应用边框和阴影。第二张图片没有从 CSS 中获取任何信息。

问题是当我这样做时，图像到底部边框有一个小间隙，我不明白为什么。

这是链接点击

Answer 1

给个图就行

display:block;

查看更新的小提琴

现在应该看起来像