上一篇
HTML如何轻松调整行间距？
在HTML中控制行间距主要使用CSS的line-height属性，可通过以下方式实现：，1. 设置具体数值（如1.5），2. 使用像素值（如20px），3. 百分比（如150%），4. 在元素内联样式或CSS文件中定义。段落文本
在网页设计中,行间距（行高）直接影响内容的可读性和视觉舒适度，通过CSS的line-height属性，开发者可精确控制文本行间的垂直距离，以下是详细方法与实践指南：
行间距的核心属性：line-height
line-height属性定义行框（line box）的高度，支持多种单位：
单位选择最佳实践
- 无单位数值（首选）
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）。
