正文-HTML:
<body>
<div id="header-image">
<img id="logo" src="/res/img/logo.png" />
</div>
<div id="menu-container">
<ul>
<li class="login"><a href="/login.php">Login</a></li>
</ul>
</div>
<div id="content"><p class="info-box error">Der Benutzer <span class="username">a</span> existert nicht.</p><form action="" method="post">
<input class="text" type="text" name="name" placeholder="Benutzername" /><br />
<input class="text" type="password" name="password" placeholder="Passwort" /><br />
<button type="submit" name="login">Login</button><button type="submit" name="register">Beitreten</button>
</form>
</div>
</body>
我知道空白格式对人眼来说并不是很好，但这不应该影响浏览器的渲染(它是由一些肮脏的 PHP 生成的，这就是原因)。
所以问题是 Chromes DevTools 显示以下空文本:
并且也不会折叠我的 .info-box.error 的边距和 #menu-container 的边距加上 它呈现一个空间#content 和 .info-box.error 开头之间的空行。 假设我有 margin: 10px; #menu-container, .info-box，总而言之，这会导致超过 30 像素的空间，其中仅应为 10px(因为折叠边距)。
我不想要这个空行。我怎样才能摆脱它？
最佳答案
文本节点不为空，而是由(不可见的)U+FEFF 零宽度不间断字符组成。它被视为数据字符，而不是空格，除非它出现在文档的最开头，它充当字节顺序标记 (BOM)。
所以它应该被删除，可能是通过将一些 PHP 文件的编码从“UTF-8 with BOM”更改为“UTF-8 without BOM”，正如@Foxhoundn 所建议的那样。
这是 PHP 软件中长期存在的错误之一，它在连接文件时不会删除 BOM。 BOM 位于 HTML 文档的开头很好，甚至值得推荐，但如果该文件被 PHP 软件附加或插入到另一个文件，则不应位于 PHP 文件的开头。
关于html - 段落前添加的空文本节点。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22298509/