在HTML中控制行间距主要使用CSS的line-height属性，可通过以下方式实现：，1. 设置具体数值（如1.5），2. 使用像素值（如20px），3. 百分比（如150%），4. 在元素内联样式或CSS文件中定义。段落文本
在网页设计中,行间距（行高）直接影响内容的可读性和视觉舒适度，通过CSS的line-height属性，开发者可精确控制文本行间的垂直距离，以下是详细方法与实践指南：
行间距的核心属性：line-height
line-height属性定义行框（line box）的高度，支持多种单位：
p {
line-height: 1.6; /* 推荐：无单位数值（相对于当前字体大小） */
line-height: 24px; /* 固定像素值 */
line-height: 150%; /* 基于字体大小的百分比 */
line-height: 1.5em; /* 相对于当前元素字体大小 */
line-height: 2rem; /* 相对于根元素（html）字体大小 */
}
单位选择最佳实践
- 无单位数值（首选）
line-height: 1.6;
优点：继承时基于当前字体大小计算，避免嵌套元素缩放问题。 - rem单位（响应式友好）
line-height: 1.8rem;
适合需要固定行高但保持响应式的场景。 - 避免百分比和em的嵌套问题
示例：父元素font-size: 16px; line-height: 150%;（行高=24px）→ 子元素font-size: 20px;时行高仍为24px，可能导致重叠。
行间距与其他排版属性的协作
- 字体大小联动
行高值 = 字体大小 × 倍数（推荐1.5–1.7倍）：body { font-size: 16px; line-height: 1.6; /* 实际行高=16px×1.6=25.6px */ } - 与段落间距（margin）配合
避免用行高替代段落间距：p { line-height: 1.6; margin-bottom: 1.2em; /* 段落间额外留白 */ }
常见问题解决方案
| 问题现象 | 原因 | 修复方法 |
|---|---|---|
| 行高设置无效 | 选择器优先级不足 | 用!important或提高特异性 |
| 内联元素行高不一致 | 行高继承被覆盖 | 直接在内联元素设置line-height |
| 文本垂直不居中 | 行高小于字体大小 | 确保行高 ≥ 字体大小 |
可访问性关键准则
- WCAG 2.1标准：行高至少为字体大小的1.5倍（正文推荐1.6）。
- 视力障碍用户：增大行高（如2.0）提升可读性，通过媒体查询实现：
@media (prefers-reduced-motion: no-preference) { .text { line-height: 2; } }
完整代码示例
<!DOCTYPE html>
<html>
<head>
<style>
/* 基础设置 */
body {
font-size: 1rem;
line-height: 1.6; /* 全局行高基准 */
}
/* 标题行高稍小 */
h1 {
font-size: 2.5rem;
line-height: 1.2;
}
/* 段落间距优化 */
p {
margin-bottom: 1.5em;
}
/* 响应式调整 */
@media (max-width: 768px) {
body {
line-height: 1.8; /* 小屏幕增加行高 */
}
}
</style>
</head>
<body>
<h1>网页排版艺术</h1>
<p>合理的行间距提升阅读流畅度，减少视觉疲劳...</p>
</body>
</html>
引用说明参考 MDN Web Docs – line-height 技术规范，遵循 W3C WCAG 2.1 可访问性标准，并采纳 Google Web Fundamentals 排版最佳实践，数据基于2025年网页可用性研究（Baymard Institute）。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/47298.html
