什么是以及如何在预格式化代码之前和之后删除/减少空格？答案

【问题标题】：What is and how can I remove/reduce the whitespace before and after preformatted code?什么是以及如何在预格式化代码之前和之后删除/减少空格？
【发布时间】：2021-12-31 15:29:27
【问题描述】：

这是一个 HTML，显示了两行短文本之间的一些代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Uffa</title>
    <style type="text/css" media="screen">
pre {
  margin: 0;
}
    </style>
  </head>
  <body>
    line before
    <pre><code>
some
  code
    here
    </code></pre>
    line after
  </body>
</html>

当我通过 devtools 用鼠标悬停时，我看到了这个：

我不明白代码块前后的垂直间距是从哪里来的。

下面是实时的 sn-p，但是，其中只复制了我的示例的顶部空间。

pre {
  margin: 0;
}

line before
<pre><code>
some
  code
    here
</code></pre>
line after

我已经大大简化了我的用例来问这个问题。简化后，我仍然看到我担心的同样问题。

但是，正如有人建议使用<pre> 而不将<code> 嵌套在其中，我可能应该澄清一下，在原始用例中，我正在使用highlight.js，它规定在@ 之间编写代码987654331@和</code></pre>。

【问题讨论】：

这是换行符，里面的一切都是预演的

尝试在

 标签的同一行写入内容（一些...）。  中的内容按其编写方式显示。

从技术上讲，我知道<pre> 的用途……我只是没有想到第一个和最后一个字符。谢谢。我想任何人都可以将其发布为答案。顺便说一句，是否有“选项”或告诉<pre> 忽略前导和尾随\ns 的东西？这样，我可以将代码保留在自己的行中
@TemaniAfif，考虑到here 之间有一个\n，为什么live sn-p 不显示here 和line after 之间的空格？和</code></pre>?
这能回答你的问题吗？ Remove leading whitespace from whitespace: pre element

标签： html css code-formatting pre

【解决方案1】：

试试这个代码

code {
  white-space: break-spaces;
}

line before
<code>
some
  code
    here
</code> line after

【讨论】：

如果有参考就好了。 CSS white-space Property 似乎不是指break-spaces。
感谢您的加入
哦，好吧，MDN Wed Docs 对此有更好的看法。
@Enlico 此处删除了 pre，因此这是一个完全不同的代码，给出了另一个不同的结果
@TemaniAfif，我没有注意到 <pre> 已被删除。哪种使这成为非答案。感谢您指出这一点。