为什么从图像到边界底部存在差距？

Question

我正在研究2种图像样式，我在这里遇到了烦人的问题，可能是因为我还不太了解。我想要做的是在第一张图像上获得第二张图像就像贴纸一样（如果你看到底部的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中得不到任何东西。

问题是当我这样做时，从图像到底部边界之间存在小的差距 我无法弄清楚原因。

以下是链接click

Answer 1

只需提供图片

display:block;

see updated fiddle

现在应该是

Answer 2

我看到您使用div标签来包含和控制图像属性和位置。请记住，默认情况下，div标签会在自身周围创建一个小边距，因此浮动或固定在同一页面上的分区和z-index不会发生冲突。要解决此问题并允许div包裹的对象互相依偎使用负边距，通常用于顶部和左侧位置。只需几个像素即可 {
保证金左：-3px;
边距：-3px;
}
在您添加的额外图像上尝试此操作，而不是原始图像，除非需要修剪其位置。 -3px只是猜测。它可能高达-10px或更高。此代码将移动图像，因此请调整负边距 您应该从第一个div的底部和右侧移除1em边距，然后尝试使用负边距以使它们更加接近。