<pre> 标签 VS. 间距标签答案

【问题标题】：<pre> tag VS. tag for spacing<pre> 标签 VS. 间距标签
【发布时间】：2011-12-02 17:05:52
【问题描述】：

我有兴趣看到这个结果。

如果你想在文本中有多个空格，你可以通过几种方式来做到这一点。

一种方式：

<p>&nbsp</p>
<p>&nbsp</p>

下一条路：

<br/>
<br/>

最后一种方式：

<pre>




</pre>

哪个是最好的？

pre 标签还可以水平放置间距，这是一个很好的简单方法：

<p>Home<pre>   </pre>About<pre>   </pre>Contact</p>

【问题讨论】：

标签： html formatting whitespace pre

【解决方案1】：

以上都不是。这就是 CSS 的用途。使用 CSS。

附录：如果出于某种原因，它必须是一个纯粹的 HTML 解决方案，我会说它们在本质上几乎是相同的，因为它们实际上都是表现性的而不是语义性的。似乎是一个 6/6 个比较。

【讨论】：

【解决方案2】：

关键是语义。使用更能反映您意图的内容。

如果您指的是段落，请使用。如果您的意思是断线，请使用 。如果您指的是预先格式化的代码，请使用<pre>。

稍后，要“格式化”，使用 CSS。

【讨论】：

很好的答案。假设在格式化时，您决定要在段落中留出一些随机文本。你会怎么做？
@PearSquirrel 如果要更改段落中的行高，请更改line-height CSS 属性。

【解决方案3】：

是的，正如 DA 建议的那样，您应该使用 CSS（word-spacing、letter-spacing）来设置文本间距。你可以使用这样的东西：

p{
    word-spacing:30px;
}

p{
    letter-spacing:2px;
}

希望这会有所帮助。

【讨论】：

也许我应该更清楚。如果您希望文本统一，这很有用，但如果有特殊情况您只需要一个分隔符，则不能使用它。我认为您更多地考虑导航栏 - 如果您有一个包含两个单词的链接怎么办？ ;)

【解决方案4】：

使用 CSS，例如：

<p>
test
  test
</p>

使用 CSS

p { white-space: pre-wrap; }

http://jsfiddle.net/Vffmj/

【讨论】：

【解决方案5】：

<pre> 标签很糟糕。请不要使用它。

它会导致格式变得奇怪，尤其是长行。它似乎也完全搞乱了移动浏览器。

【讨论】：

【解决方案6】：

我想说  标记在这种情况下实际上更好，因为它需要更少的代码供浏览器解析。虽然我知道它并没有太多额外的鳕鱼，但它仍然有一点点，并且在网站性能方面，你使用的越少越好。

但是，更合适的方法是在元素周围设置填充样式。

只是凭直觉，但根据您所说的，我认为最理想的方法是：

<style type="text/css">
 #Navigation { padding: 0; margin: 0; }
 #Navigation li { float: left; list-style-type: none; display: inline-block; }
</style>

<ul id='Navigation'>
 <li>Home</li>
 <li>About</li>
 <li>Contact</li>
</ul>

【讨论】：

服务器在大多数情况下不解析 HTML。浏览器会。