在HTML中调节行间距主要通过CSS的line-height属性实现，可设置数值（如1.5）、百分比或固定单位（如24px），作用于段落、div等元素，p {line-height: 1.6;} 即可增加文本行间距离。
在HTML中调节行间距主要依赖CSS的line-height属性，行间距直接影响文本可读性和用户体验，合理设置能提升内容可读性75%以上（根据NNGroup研究）,以下是详细方法：
核心方法：使用line-height属性
<p style="line-height: 1.6;">这是1.6倍行高的文本，适合长段落阅读。</p>
单位选择建议：
- 无单位数值（推荐）：
line-height: 1.5;（基于当前字体尺寸缩放） - em单位：
line-height: 1.5em;（继承父元素计算值） - px单位：
line-height: 24px;（固定值,不推荐响应式场景） - 百分比：
line-height: 150%;（类似em）
最佳实践：主内容区使用1.5-1.7倍行高，移动端建议≥1.6（依据WCAG 2.1可访问性标准）
三种实现方式
-
内联样式（快速调试）
<p style="line-height: 1.8;">临时调整时使用，但不利于维护</p>
-
内部样式表（单页应用）
<style> .content { line-height: 1.6; font-size: 18px; /* 基准尺寸 */ } h2 { line-height: 1.3; /* 标题需更紧凑 */ } </style> -
外部CSS（最佳实践）
/* styles.css */ body { line-height: 1.65; /* 全局默认值 */ } .article { line-height: 1.7; /* 文章页特殊设定 */ }
响应式适配技巧
/* 移动端增加行高 */
@media (max-width: 768px) {
p {
line-height: 1.75 !important;
}
}
可访问性注意事项
- WCAG 2.1要求：行高至少为字体尺寸的1.5倍
- 字体较大时（如24px+）可适当降低至1.3倍
- 避免超过2.0倍行高（导致视觉断层）
常见问题解决
- 行高失效：检查父元素继承关系，用开发者工具审查计算值
- 垂直居中：设置
line-height = height实现单行文本居中 - 间距过大：重置全局样式：
* { line-height: normal }
专业建议：优先使用无单位数值配合rem字体单位（如
font-size: 1.125rem; line-height: 1.6;）,确保各设备比例协调。
引用说明
本文方法遵循W3C CSS规范（www.w3.org/TR/CSS22/visudet.html#line-height）及WebAIM可访问性指南（webaim.org/techniques/fonts），数值标准参考Google核心网页指标（web.dev/vitals）及尼尔森诺曼集团研究报告（nngroup.com/articles/line-spacing）。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/47585.html
