php - 页面上图像之间存在空格，但无法在 HTML/CSS 中找到源代码

Question

<div id="head-ads">

    <img id="ad-home-head-1" src="images/blank-ad.png" />
    <img id="ad-home-head-2" src="images/blank-ad.png" />

</div>

这就是 html 代码。两个图像应该在同一行上彼此相邻出现，并且它们之间没有任何空白。我的 CSS 使得这两个内联图像之间没有边距或填充。然而，两个图像之间出现 3 个像素的空白。

现在，当我删除 HTML 文件中的换行符时:

<div id="head-ads">

    <img id="ad-home-head-1" src="images/blank-ad.png" /><img id="ad-home-head-2" src="images/blank-ad.png" />

</div>

3 个像素的空白消失了。

所以我认为可能存在字符编码问题或其他问题。但 HTML 文件保存为 UTF-8，这也是页面定义使用的:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

对于为什么 HTML 代码中的换行符在浏览器中查看时在图像之间添加三个像素的空白有什么想法吗？在 Mac OS X 上的 FireFox 和 Chrome 中已经观察到了这一点。

这些文件是 WordPress 主题的一部分。但这是我从头开始创建的主题，因此我 100% 熟悉 HTML 和 CSS。这很简单。我不知道 PHP 或 WordPress 是否做了一些奇怪的事情。但我对 HTML 的理解告诉我，在代码中添加换行符不应该在浏览器中添加空格。

Answer 1

在#head-ads DIV中写入font-size:0。像这样写:

#head-ads{
 font-size:0;
}
img{
 vertical-align:top;
}