Question

此问题涉及doctype，因此我不会使用JFiddle，因为自动包含了doctype

您可以复制并粘贴到file.html中并通过运行

我用它来显示一些信息，我在没有时使用它使用doctype声明它工作正常（span元素之间没有垂直间距）

<html>

<style>

   span {
      font-family:sans-serif;
      font-size:9px;
      color:#666666;
   }
   #statusPass {
      color:#66CC00;
   }
   #statusFail {
      color:#FF0000;
   }

</style>

<body>

<span>process... </span>
<span id="statusPass">pass<br /></span>
<span>process... </span>
<span id="statusFail">fail<br /></span>

</body>
</html>

但是，如果我添加一个doctype标签，它似乎会自动添加跨距之间的垂直间距，我不确定为什么但是有没有办法将其删除？

<!DOCTYPE html> <!-- this guy's the culprit -->
<html>

<style>

   span {
      font-family:sans-serif;
      font-size:9px;
      color:#666666;
   }
   #statusPass {
      color:#66CC00;
   }
   #statusFail {
      color:#FF0000;
   }

</style>

<body>

<span>process... </span>
<span id="statusPass">pass<br /></span>
<span>process... </span>
<span id="statusFail">fail<br /></span>

</body>
</html>

Answer 1

当我使用p而不是span并添加额外的css

时，它似乎有效

<!DOCTYPE html>
<html>

<style>

   p {
       margin:0; padding:0;
       font-family:sans-serif;
       font-size:9px;
       color:#666666;
   }
   #statusPass {
       color:#66CC00;
   }
   #statusFail {
       color:#FF0000;
   }

</style>

<body>

<p>process...
<span id="statusPass">pass</span>
</p>

<p>process...
<span id="statusFail">fail</span>
</p>

</body>
</html>

Answer 2

删除span元素之间的空白区域（新行）。

旧浏览器中的错误（在缺少Doctype时在较新的浏览器中模拟）无法在应该呈现的元素之间呈现一些空间。

从<span> HTML元素中删除间距

2 个答案: