Html Pre元素的空白问题

我在HTML

pre

元素方面遇到了一个非常恼人的问题。我不知道为什么它会产生这么多空白，而我从来没有这样做过。在我的代码编辑器中，所有内容都正确缩进，确保HTML是100%有效的，但只要我在浏览器上进行测试；空白突然出现。为了让事情更容易理解，这里有一个图像显示了

pre

在我的控制台中的外观

<pre>
    &#60;!DOCTYPE html&#62;
    &#60;html&#62;
    &#60;head&#62;
    &#60;title&#62;My website&#60;title&#62;
    &#60;/head&#62;
    &#60;body&#62;

    &#60;script type="text/javascript"&#62;
         alert("Hello world!");
    &#60;/script&#62;
    &#60;/body&#62;
    &#60;/html&#62;
</pre>

下面是HTML/CSS代码

HTML

如果它有帮助，我也使用棘轮，以使其移动准备。 （请注意，删除空白没有帮助）。 关于。

而不是：

white-space: pre-line

使用：

空白

属性用于描述 元素被处理

预包装

保留空格序列

前置行

空格序列被折叠

---

HTML忽略选项卡。我认为

pre

元素尊重它们。你确定你把所有的空白都去掉了吗？嗯，这确实解决了问题。但这肯定会使HTML很难阅读，以便以后编辑。没有办法吗？

pre

保留空白。你在这里使用它的理由是什么？@fauxserious-我正要问同样的问题，如果你不使用

pre

来保留空白，那么你为什么要使用它呢？@RayJoe-我也遇到了同样的问题，为了使输出更好，格式化的代码很难看。我找不到它的周围。有时候，你只需要继续前进。工作得很有魅力！谢谢。请注意，您不需要使用

元素，因为您可以应用

空白：pre-line到任何selector@xec谢谢你的提示现在，只要CSS命名有一点点直观的感觉。我的意思是，当空白是预换行时，它会被保留，但当它是预换行时，它会被折叠。当你第一次听到它的时候，这是没有意义的，你只需要记住它。
white-space: pre-wrap

white-space: pre-line