HTML文本怎么设置行高间距？CSS调整行高和间距的方法有哪些

在网页开发中，文本的排版效果直接影响用户的阅读体验，合理设置行高和间距是基础且重要的操作。很多刚接触前端的开发者会疑惑HTML文本怎么设置行高间距，其实文本的行高和间距都属于样式层面的调整，需要通过CSS来实现，HTML本身仅负责文本的结构承载。

一、行高设置：line-height属性

行高指的是文本行与行之间的垂直距离，通过line-height属性控制，该属性可以作用在块级元素或者行内元素上，常见的取值类型有数字、长度单位、百分比三种。

1. 不同取值类型的效果对比

2. 代码示例

下面是一个设置段落行高的实际示例：

/* 设置类为text-content的段落行高为字体大小的1.6倍 */
.text-content {
  font-size: 16px;
  line-height: 1.6;
  /* 也可以写成固定值 line-height: 25.6px */
  /* 或者百分比 line-height: 160% */
}

二、字符间距设置：letter-spacing属性

字符间距指的是单个字符之间的水平距离，通过letter-spacing属性控制，取值可以是正数、负数或者长度单位，默认值为normal，等同于0。

当取值为正数时，字符之间的间距会变大；取值为负数时，字符会相互靠近，甚至重叠。下面是具体的代码示例：

/* 正数字符间距，适合标题等需要突出显示的文本 */
.title {
  font-size: 20px;
  letter-spacing: 2px;
}

/* 负数字符间距，适合特殊排版场景 */
.special-text {
  letter-spacing: -0.5px;
}

三、单词间距设置：word-spacing属性

单词间距指的是英文单词之间的水平距离，通过word-spacing属性控制，同样支持正数、负数和长度单位取值，对中文文本没有效果，因为中文没有单词的概念。

实际使用示例：

/* 增加英文单词之间的间距 */
.english-paragraph {
  font-size: 16px;
  word-spacing: 4px;
}

/* 缩小单词间距 */
.tight-english {
  word-spacing: -1px;
}

四、组合使用技巧

在实际排版中，通常会组合使用这几个属性来达到更好的效果，比如标题可以同时设置行高和字符间距：

/* 标题组合样式设置 */
.page-title {
  font-size: 24px;
  line-height: 1.8; /* 行高设置为字体大小的1.8倍 */
  letter-spacing: 3px; /* 字符间距3px */
  margin-bottom: 16px; /* 标题下方的外边距，增加和下方内容的间距 */
}

五、注意事项

• line-height属性如果只设置数字，子元素会继承比例，更适合响应式场景；如果设置固定长度或百分比，子元素会继承计算后的固定值，可能需要单独调整子元素的行高。
• letter-spacing和word-spacing的负值不要设置过大，否则会导致字符或单词重叠，影响阅读。
• 如果文本中包含中文和英文混合内容，word-spacing只会对英文单词生效，中文部分不会受影响。

需要注意的是，HTML中的<br>标签只是强制换行，不会改变行高，行高的调整必须依赖CSS的line-height属性实现。

HTMLline-heightletter-spacingword-spacingCSS_text_spacing修改时间：2026-05-26 13:36:37