css - 消除 HTML/CSS 中图像之间的空白

Question

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

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

score 4 · Accepted Answer

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

img { display: block; }

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

score 3 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

1

添加

#certificate img { display: block; }

到 css 的结尾

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

5 回答 5