摆脱HTML / CSS中图像之间的差距

Question

我正在制作可打印的证书。由于默认情况下未启用背景图像，因此我通过放置img标签来制作边框。

由于某种原因，img标签之间存在几个像素的间隙...

jsfiddle

Answer 1

您只需要使图像块元素：

img { display: block; }

它们都会排成一行。默认情况下，图像是内联元素，因此Xavi表示你的换行符中有空格。当然，如果涉及任何其他图像，您将需要优化您的选择器。

Answer 2

使用position: relative;移动图片以填补空白

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

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

My Fiddle

Answer 3

在Vertical-align和#top_border中设置#bottom_border为

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

FIDDLE此处

Answer 4

尝试将font-size: 0添加到#certificate。你看到的差距实际上是空格（角色）。我完全承认将字体大小设置为零有点像黑客。幸运的是，当完全支持css3的white-space rules时，您可以使用text-space-collapse: collapse代替。

Answer 5

添加

#certificate img { display: block; } 

到css的末尾