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 倍字体大小） | 是 | 默认文本（段落） | 跨浏览器可能有细微差异 |
