避免前标签内的边距[重复]

【问题标题】：Avoid the margin inside pre tag [duplicate]避免前标签内的边距[重复]
【发布时间】：2016-06-11 03:25:12
【问题描述】：

如何避免pre标签内的边距：

<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>

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：

【解决方案2】：

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

如果您真的想避免捕获空白，那么使用<div> 可能会更适合您。否则，我建议您预先格式化您的文本。

【讨论】：