有一个简单的css:

white-space: pre;

它保留您在HTML中添加的空格，而不是统一它们。

p {background-color: #FFEEEE;保证金:0;填充:0.5em 0;｝ < span style=" font - family:宋体;tab-size: 4 " > & # 9 # 9 & # 9←←一个选项卡两个标签# 9 & # 9 & # 9←三个标签# 9 & # 9 & # 9 & # 9←四个选项卡。< / p > < span style=" font - family:宋体;tab-size: 4">←这是一个字符 < span style=" font - family:宋体;</p> . tab-size: 42">&#9←This one has come out too far.</p> . < span style=" font - family:宋体;tab-size: 8">&#9←说!</p>

太懒了;没有“运行代码”):

通过输入&#9在文本中插入制表符，或者(如果您确定文档是UTF-8编码的)按下制表键! 添加空白:预换行;到文本元素的CSS规则，以阻止空格字符(包括制表符)折叠。 添加tab-size: 4;到你的文本元素的CSS规则，以确保你的制表符宽度等于四个标准空格字符。

(在众多的回答和评论中，每一件事都有一些片段和线索，但没有一个像它的措辞那样把它们放在一起来回答这个问题。)

编辑:不幸的是，堆栈代码段将我的Unicode制表符转换为空格!因此，演示的这一部分(第2行)不起作用。如果通过代码格式化器运行代码，可能会遇到类似的问题。&#9避免了这些问题。

我们可以像这样使用style="white-space:pre":

<p>Text<tab style="white-space:pre">        </tab>: value</p>
<p>Text2<tab style="white-space:pre">   </tab>: value2</p>
<p>Text32<tab style="white-space:pre">  </tab>: value32</p>

里面的空白处填满了制表符，制表符的数量取决于文本。

它看起来是这样的:

Text    : value
Text2   : value2
Text32  : value32

您可以使用一个表并将width属性应用于第一个<td>。

<table>
    <tr>
        <td width="100">Content1</td>
        <td>Content2</td>
    </tr>
    <tr>
        <td>Content3</td>
        <td>Content4</td>
    </tr>
</table>

结果

Content1       Content2
Content3       Content4

理想的CSS代码应该是“display”和“min-width”属性的组合…

display: inline-block;
min-width: 10em; // ...for example, depending on the uniform width to be achieved for the items [in a list], which is a common scenario where tab is often needed.

&emsp;， & enp;， &#8195;或& # 8194;可以使用。

W3说……

字符实体和分别表示一个en空格和一个em空格，其中en空格是点大小的一半，em空格等于当前字体的点大小。

HTML3的更多信息请访问W3.org

HTML4请在W3.org上阅读更多内容

维基百科上更多