Question

我在开发site时遇到了奇怪的问题。

我计算机上的任何浏览器都会在页面的某些元素上方添加一个间距（例如，在导航栏上方，导航栏中的下拉列表，容器等）。在Chrome开发者工具中，它显示为有一个奇怪的text元素（带间距的引号）：

但在源代码中它显示没有它：

如果我从工具中删除引号，间距就会消失。

Javascript或PHP无法添加引号（间距）：它存在我们评论所有脚本包括并禁用.html文件（example）的php预处理。 CSS无法添加此间距：例如对于navbar我们有规则：

.navbar {
  margin-top: 0;
}

我的计算机上的所有浏览器都存在间距（在Firefox，Chrome，IE 9中测试过）。

此外，Firefox Dev Tool不显示任何引号：

但在代码中添加了Chrome开发工具中引号的位置。

那么，它是什么？如何删除这个间距（我不想使用像负边距这样丑陋的解决方案）？

请评论您的机器上有这个问题吗？感谢。

Answer 1

在我看来，空间是特殊的空间＆＃39;像 一样。即使在文本编辑器中，它们也可能看起来像普通的空格字符

查看生成HTML结构的代码。然后删除请求中的空格。使用空格键放回格式空间。

修改

仔细观察我的文本编辑器，我意识到，你的代码中有一个特殊的变音字符。

当你从Notepad ++编辑器中查看我的屏幕时，会有一些小的＆＃39;钩子＆＃39;在<和<nav>标记的小于字符（<li>）处，我标记为红色。

不要删除空格，删除小于字符（<）并使用键盘重新输入。

enter image description here

Answer 2

<body>和<nav>元素之间的字符是换行符和BOM - 字节顺序标记（也称为零宽度不间断空格）U + FEFF（UTF-8中的EF BB BF））。请参阅以下从Hex编辑器Neo中获取的图像

enter image description here

这是您需要删除的BOM。

Answer 3

源HTML中有空格：<body>和<nav>之间。让它消失的唯一方法是将两个标签一起运行，如

<body><nav class="..."> ... </nav></body>

HTML规定在属性值之外的空格的运行被视为一个单独的空间，因此它有多少空白，如果它是换行符，等等，即使你有一个空格字符也没关系。您的HTML，符合标准的浏览器必须将其视为文本节点。这是Chrome通过显示引号提示的这些文本节点。