在HTML页面开发时，我们经常会遇到需要调整元素内空白区域或者文字间距的需求，不同的需求对应着不同的实现方式，掌握这些方法能更高效地完成页面排版工作。
HTML原生空格添加方法
普通空格与换行空格
在HTML中，直接输入空格键产生的空白，浏览器默认会合并连续的多个空格为单个空格，比如输入多个空格，最终页面只会显示一个。如果需要插入多个连续的普通空格，可以使用HTML实体 ，每个 代表一个不换行空格，不会被浏览器合并。
下面是一个插入多个 的示例：
<p>这是一段测试文字 这里有三个不换行空格</p>
其他特殊空格实体
除了 ，HTML还提供了其他不同宽度的空格实体，适配不同的排版需求：
 ：半角空格，宽度等于当前字体大小的一半 ：全角空格，宽度等于当前字体大小 ：窄空格，宽度比普通空格更窄
使用示例：
<p>半角空格： |</p> <p>全角空格： |</p> <p>窄空格： |</p>
CSS letter-spacing调整字符间距
如果需要统一调整一段文字中所有字符之间的间距，使用 逐个插入的方式效率很低，这时候可以使用CSS的letter-spacing属性，该属性可以设置文本中字符之间的水平间距。
letter-spacing基本用法
letter-spacing的取值可以是正数、负数或者normal，正数会增加字符间距，负数会缩小字符间距，normal表示使用浏览器默认的字符间距。
基本语法如下：
选择器 {
letter-spacing: 取值;
}
实际使用示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>letter-spacing示例</title>
<style>
.text1 {
letter-spacing: 2px;
}
.text2 {
letter-spacing: 0.5em;
}
.text3 {
letter-spacing: -1px;
}
</style>
</head>
<body>
<p class="text1">这是字符间距为2px的文字</p>
<p class="text2">这是字符间距为0.5em的文字</p>
<p class="text3">这是字符间距为-1px的文字</p>
</body>
</html>
letter-spacing注意事项
- letter-spacing会影响元素内所有字符的间距，包括中文、英文、数字和符号
- 取值可以使用px、em、rem等CSS长度单位，em单位会相对于当前元素的字体大小计算间距
- 如果是行内元素，letter-spacing只会影响该元素内的字符，不会影响其他相邻元素的字符
不同方法的适用场景
我们可以根据实际需求选择合适的空格添加方式：
| 需求场景 | 推荐方法 |
|---|---|
| 插入少量固定宽度的空白，比如文字和图标之间的间隔 | 使用 、 等HTML空格实体 |
| 调整整段文字的字符间距，让排版更美观 | 使用CSS letter-spacing属性 |
| 需要插入多个连续空格且不被浏览器合并 | 使用多个 实体 |
| 需要根据字体大小自适应调整空格宽度 | 使用 、 或者letter-spacing配合em单位 |
常见问题说明
很多开发者会疑惑为什么直接输入多个空格没有效果，这是因为HTML的默认规则会合并连续的空白字符，包括空格、换行、制表符等，所以连续输入多个空格只会显示一个，需要使用对应的HTML空格实体来避免合并。
另外letter-spacing设置的是字符之间的间距，不是单词之间的间距，如果需要调整英文单词之间的间距，应该使用word-spacing属性，不要混淆这两个属性的作用。
HTMLletter-spacingCSS空格添加修改时间：2026-06-11 23:54:28