避免在pre标签内出现边距。

Question

如何避免

标签内的空白边距：


<p>Some text</p>

<pre>
    <code>
        Some code
    </code>
</pre>

<p>Some text</p>

<style>
pre {
    background-color: rgb(255,247,229);
    border: 1px solid red;
}
</style>


当前输出：





期望的输出效果：





目前的解决方案是手动删除标记中的缩进，如下所示。然而，据我了解，这不是最优的方法。

<pre>
    <code>
Some code
    </code>
</pre>

- john c. j.

Answer 1

你可以尝试将<pre>标签的默认值white-space从pre更改为pre-line。

pre-line 连续的空格被折叠。行会在换行符处、<br>处以及必要时断开，以填充行框。

在MDN上了解更多关于white-space的信息。

pre {
  background-color: rgb(255, 247, 229);
  border: 1px solid red;
  white-space: pre-line;
}

<p>Some text</p>
<pre>
  <code>
    Some code
  </code>
</pre>
<p>Some text</p>

- Stickers

Answer 2

<pre>（预格式化文本）标签可以捕获空格字符。

如果您真的想避免捕获空格，则使用<div>可能更适合您。否则，我建议您对文本进行预格式化处理。

- S. Thrall