CSS line-height 属性详解

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