0

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

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

jsfiddle

4

5 回答 5

4

你只需要让你的图像块元素：

img { display: block; }

一切都会顺理成章。默认情况下，图像是内联元素，因此正如 Xavi 所说，您从换行符中获得了空白。当然，如果涉及到任何其他图像，您将需要优化您的选择器。

于 2012-10-02T04:40:14.217 回答
3

用于position: relative;移动图像以填补空白

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

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

我的小提琴

于 2012-10-02T04:34:29.650 回答
3

设置Vertical-align在你的#top_border和#bottom_border作为

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

小提琴在这里

于 2012-10-02T04:42:17.417 回答
1

尝试添加font-size: 0到#certificate. 您看到的空白实际上是空格（字符）。我完全承认将字体大小设置为零有点麻烦。幸运的是，当完全支持 css3的空白规则text-space-collapse: collapse时，您可以改用它。

于 2012-10-02T04:35:12.907 回答
1

添加

#certificate img { display: block; }

到 css 的结尾

于 2012-10-02T04:50:06.290 回答