css的letter-spacing属性是专门用于调整文本字符之间水平间距的样式属性，它可以作用于块级元素、行内元素等各类包含文本内容的元素，通过调整这个属性的值，能让文本呈现更紧凑或者更疏朗的视觉效果，适配不同的设计需求。
letter-spacing基本语法
letter-spacing属性的语法格式非常简单，直接赋值即可，默认情况下如果不设置该属性，浏览器会使用normal作为默认值，也就是字符采用默认的排版间距。
/* 基本语法 */
selector {
letter-spacing: 取值;
}
letter-spacing的取值类型
letter-spacing支持多种取值类型，不同取值对应的效果差异明显，开发者可以根据实际需求选择合适的取值：
- normal：默认值，使用浏览器默认的字符间距，不同浏览器的默认间距可能略有差异，但通常差异很小。
- 长度值：可以是正数也可以是负数，单位支持px、em、rem、pt等css常用的长度单位。正数值会让字符间距变大，负数值会让字符间距变小，甚至字符重叠。
- inherit：继承父元素的letter-spacing取值。
不同取值的效果示例
下面通过具体的代码示例展示不同取值的实际效果，方便理解每个取值的作用：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>letter-spacing效果示例</title>
<style>
.normal {
letter-spacing: normal;
}
.positive {
letter-spacing: 4px;
}
.negative {
letter-spacing: -1px;
}
.em-unit {
letter-spacing: 0.2em;
}
p {
margin: 10px 0;
font-size: 16px;
}
</style>
</head>
<body>
<p class="normal">这是默认字符间距的文本</p>
<p class="positive">这是字符间距为4px的文本</p>
<p class="negative">这是字符间距为-1px的文本</p>
<p class="em-unit">这是字符间距为0.2em的文本</p>
</body>
</html>
常见使用场景
letter-spacing在实际开发中有很多实用的场景：
- 标题排版：对于大标题或者特殊标题，适当增大letter-spacing可以让标题看起来更舒展，提升视觉层次感。
- 英文文本优化：英文单词的字符间距如果过小会显得拥挤，适当增大间距可以提升英文文本的可读性。
- 特殊设计效果：部分设计需要字符之间有明显间距，比如导航栏的文字、按钮上的文字，都可以通过letter-spacing调整。
- 修复字体间距问题：部分字体本身字符间距不合理，可以通过letter-spacing微调，让文本显示更协调。
注意事项
使用letter-spacing时需要注意以下几点：
- 负数值不要设置过大，否则会导致字符重叠，影响文本可读性。
- 使用em作为单位时，间距会根据元素自身的字体大小计算，适合响应式场景下使用，能跟随字体大小自动调整间距。
- letter-spacing会影响元素内所有文本内容，包括子元素的文本，除非子元素单独设置了letter-spacing覆盖父元素的取值。
- 部分特殊字符的间距调整可能和预期略有差异，实际使用时建议在浏览器中实时调试，找到最合适的取值。
与其他间距属性的区别
很多开发者会混淆letter-spacing和word-spacing，两者的作用对象不同：letter-spacing调整的是字符之间的间距，包括中文的单个汉字、英文的单个字母；而word-spacing调整的是单词之间的间距，只对英文等以空格分隔单词的文本有效，对中文没有作用。
如果需要同时调整字符间距和单词间距，可以两个属性一起使用，比如英文段落可以同时设置letter-spacing和word-spacing，让排版更美观。
cssletter-spacing字符间距文本样式修改时间：2026-06-20 08:27:14