CSS line-height 属性详解（表格不含代码）
1. 属性核心功能
控制文本行间距（基线间垂直距离），默认值 normal（通常为字体大小的 1.2 倍）。
2. 属性值类型及效果对比
| 值类型 |
语法格式 |
计算方式 |
适用场景 |
注意事项 |
| 数值（number） |
line-height: 1.5; |
行高 = 字体大小 × 数值 |
响应式布局（自动适配字体大小） |
需与 font-size 协同使用 |
| 长度（length） |
line-height: 20px; |
固定行高（如 px, em, rem） |
精确控制（如图标容器、标题） |
不响应字体大小变化 |
| 百分比（%） |
line-height: 150%; |
行高 = 字体大小 × (百分比/100) |
比例适配（如移动端自适应） |
同长度类型，需明确基准字体大小 |
| normal |
line-height: normal; |
浏览器默认值（通常 1.2 倍字体大小） |
默认文本（如段落） |
跨浏览器可能有细微差异 |
3. 关键特性总结
| 特性 |
描述 |
示例场景 |
| 继承性 |
可继承，子元素默认继承父级 line-height |
全局设置 body { line-height: 1.6; } |
| 块级元素效果 |
决定文本基线间距，元素高度由内容撑开（除非设置 height） |
段落文本布局 |
| 内联元素效果 |
仅影响自身文本垂直对齐，实际行高由父级块级元素决定 |
内联图标与文本混合 |
| 垂直居中单行文本 |
设置容器高度与 line-height 相等即可实现垂直居中 |
导航栏按钮文字居中 |
4. 常见组合与最佳实践
| 场景 |
解决方案 |
说明 |
| 响应式文本 |
全局设 line-height: 1.5，标题设 line-height: 1.2 |
自动适配字体大小，保持一致性 |
| 避免行高塌陷 |
为父级添加 overflow: hidden 或手动设置段落外边距 |
补偿相邻块级元素间距 |
| 多行文本垂直居中 |
结合 Flex 布局（如 display: flex; align-items: center） |
比单依赖 line-height 更可靠 |
| 内联元素行高控制 |
将内联元素包裹在独立块级容器中，单独设置 line-height |
避免依赖父级行高 |
5. 兼容性与问题解决
| 问题 |
解决方案 |
| 跨浏览器默认值差异 |
显式设置 line-height 值（如 1.5）以统一效果 |
| 内联元素行高失效 |
通过块级容器包裹内联元素，单独控制其 line-height |
| 旧版浏览器（如 IE）问题 |
避免百分比，改用 em 或 px 单位，确保计算一致性 |
6. 完整对比表格（仅文字描述）
| 属性值类型 |
计算方式 |
是否响应字体大小 |
典型用途 |
兼容性 |
| 数值（如 1.5） |
相对于字体大小的倍数 |
是 |
响应式布局 |
全部浏览器支持 |
| 长度（如 24px） |
固定像素值 |
否 |
精确控制（标题、按钮） |
全部浏览器支持 |
| 百分比（如 150%） |
相对于字体大小的百分比 |
是 |
比例适配（移动端） |
需注意基准字体大小 |
| normal |
浏览器默认值（通常 1.2 倍字体大小） |
是 |
默认文本（段落） |
跨浏览器可能有细微差异 |