HTML 空格： 、多个空格与 white-space

在 HTML 中添加空格

在 HTML 中两个单词之间输入五个空格，浏览器只会显示一个。任何连续的空格、制表符和换行都会合并成一个空格。要添加额外的空格，就使用不换行空格实体  ，每个空格写一次：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spaces</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 18px; }
  </style>
</head>
<body>
  <p>Five typed spaces:     one shows.</p>
  <p>Five nbsp entities:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;five show.</p>
</body>
</html>

在一行文字中加几个空格时，  很好用。如果需要更大的间隙，或者元素之间的间距，请使用 CSS，下文会讲到。

  的作用

  是不换行空格（字符 U+00A0）。它有两个作用：

1. 它永远不会被合并，所以写三个就是三个空格。
2. 浏览器永远不会在它这里换行，所以它两边的词会保持在一起。

第二点才是它真正的用途。数字和单位、姓名缩写，以及被拆到两行会显得别扭的短语，都可以用   连在一起：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Non-breaking space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { width: 170px; border: 2px solid #e5e7eb; padding: 4px; }
    .nb { border-color: #16a34a; }
  </style>
</head>
<body>
  <p>The race is exactly 10 km long and starts at 9 am.</p>
  <p class="nb">The race is exactly 10&nbsp;km long and starts at 9&nbsp;am.</p>
</body>
</html>

在灰色框中，“10”和“km”落在了不同的行上。在绿色框中，它们无法被分开。要让更长的一段文字保持在一起，给 span 设置 white-space: nowrap 比连续写多个实体更简单，参见换行页面。

不同宽度的空格实体

HTML 为更宽和更窄的空格提供了命名字符。它们同样不会被合并，因此很适合用来微调文字中的间距：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space widths</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 24px; }
    mark { background: #bfdbfe; }
  </style>
</head>
<body>
  <p>A<mark>&nbsp;</mark>B nbsp</p>
  <p>A<mark>&ensp;</mark>B ensp</p>
  <p>A<mark>&emsp;</mark>B emsp</p>
  <p>A<mark>&thinsp;</mark>B thinsp</p>
</body>
</html>

蓝色高亮显示了每种空格的宽度。只有   和   同时能阻止换行。

保留所有空格：pre 与 white-space

当间距本身就是内容的一部分时（代码、ASCII 艺术字、对齐的列、诗歌），应该保留所有空白，而不是添加实体。<pre> 元素默认就会这样做，CSS 的 white-space 属性则可以让任何元素这样做：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>white-space</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    div { border: 2px solid #e5e7eb; padding: 6px; margin-bottom: 8px; font-family: monospace; }
    .pre { white-space: pre; border-color: #2563eb; }
    .prewrap { white-space: pre-wrap; border-color: #f59e0b; }
  </style>
</head>
<body>
  <div>Name    Score
Ana     12</div>
  <div class="pre">Name    Score
Ana     12</div>
  <div class="prewrap">Name    Score
Ana     12</div>
  <pre>pre   keeps   spaces   too</pre>
</body>
</html>

对于用户输入的文字，你想要的通常是 pre-wrap：它保留间距，在窄屏上也仍然会自动换行。pre 则让每一行保持原样，超出时滚动或溢出。

在 pre 中，制表符也会被保留。它的宽度默认是 8 个空格，可以用 tab-size 属性修改（tab-size: 4）。

用 CSS 设置间距

大多数“我需要在这里加个空格”的情况，其实都是布局问题，而 CSS 比实体做得更好，因为间隙能保持一致，而且只需在一个地方修改：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS spacing</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .icon { margin-inline-end: 12px; color: #2563eb; }
    .wide { letter-spacing: 0.3em; }
    .words { word-spacing: 1em; }
    .buttons { display: flex; gap: 16px; }
  </style>
</head>
<body>
  <p><span class="icon">&#9733;</span>margin after an icon</p>
  <p class="wide">letter-spacing</p>
  <p class="words">word spacing between words</p>
  <div class="buttons"><button>One</button><button>Two</button><button>Three</button></div>
</body>
</html>

margin 和 padding 设置元素之间的间距，gap 设置 flex 或 grid 容器中各项之间的间距，letter-spacing 和 word-spacing 设置文字本身的间距。要缩进段落的首行，请使用 text-indent，文本居中页面中有介绍。

行内元素之间的间隙

空白合并也有另一面：两个行内元素或行内块元素之间的空白仍然算作一个空格。源代码中两个按钮之间的换行，会在它们之间留下一个小间隙：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline gap</title>
  <style>
    span { display: inline-block; width: 60px; height: 30px; background: #2563eb; }
    .flex { display: flex; margin-top: 8px; }
  </style>
</head>
<body>
  <div>
    <span></span>
    <span></span>
  </div>
  <div class="flex">
    <span></span>
    <span></span>
  </div>
</body>
</html>

第一对按钮之间有间隙，来自源代码中的换行。在 flex 容器中，各项之间的空白会被忽略，所以第二对按钮紧挨在一起。想要精确控制间距时，请使用 flex 和 gap。

常见错误

• 用一串   做布局。字体或屏幕尺寸一变，布局就会乱掉。请使用 margin、padding 或 gap。
• 输入多余的空格，并指望它们显示出来。它们会被合并。请使用   或 white-space: pre-wrap。
• 把 &nbsp 写成不带分号的形式。浏览器通常能接受，但它是无效的，在某些位置会失效。始终以 ; 结尾。
• 到处用   来阻止换行。一长段不换行的文字在手机上会溢出。只把必须放在一起的部分连起来。
• 用空格缩进段落。请使用 CSS 的 text-indent。