消除HTML/CSS中图像之间的间隙

我正在制作一份可打印的证书。由于默认情况下不启用背景图像，所以我通过放置img标记来创建边框

由于某些原因，img标签之间有几个像素的间隙

---

使用

位置：相对

移动图像以填补空白

#bottom_border{
   position: relative; 
   bottom: 5px;
 }

#top_border{
   position: relative; 
   top: 5px;
 }

---

尝试将

字体大小：0

添加到

证书中。您看到的间隙实际上是空格（角色）。我完全承认，将字体大小设置为零有点麻烦。幸运的是，当完全支持for css3时，您可以使用。
您只需将图像块元素：

img { display: block; }

一切都会顺理成章。默认情况下，图像是内联元素，因此正如哈维所说，换行符中会出现空白。当然，如果涉及到任何其他图像，您需要改进选择器。
将
上下边框中的
垂直对齐设置为

#top_border{ vertical-align:bottom}
#bottom_border{vertical-align:top}

此处
添加

#certificate img { display: block; } 

在css的结尾
我实际上被告知了相反的情况。将属性设置为
0
时，请禁用单位，因为它更简洁，并且解释方式相同。添加
px
背后的理性是什么？是否存在一些浏览器兼容性问题？是的，主要是在使用
时。当我使用HTML5 doctype创建网站时，如果我遗漏了
px
这个解决方案非常脆弱，它就不会尊重任何值。
top
和
bottom
值非常依赖于当前字体大小。我建议使用另一种解决方案。@Xavi您知道CSS定位吗？是的，我知道。我已将字体大小调整为
18px
。请注意底部图像上的间隙是如何重新出现的：@Xavi当您增加字体大小、填充元素时，您需要重新设置位置，这是纯css基础…为我节省了数小时徒劳的尝试和错误编码。非常感谢。太棒了，很高兴能帮上忙。