line-height合法值类型包括无单位数字（如1.5）、长度值（如24px）、百分比（如150%）和normal；其中无单位数字最推荐，因其继承安全、响应式适配好，而px等长度值易导致子元素行距失衡。
line-height 的合法值类型有哪些
设置行高本质是控制 line-height 属性，它接受多种值类型，但行为差异极大：
• 数字（如 1.5）：无单位，相对于当前元素字体大小的倍数，推荐使用，继承安全
• 长度值（如 24px、1.2em）：绝对或相对长度，但子元素继承的是计算后的具体值，可能破坏层级缩放
• 百分比（如 150%）：等价于数字乘以 100，但继承机制和数字一致，实际用得少
• normal：浏览器默认值（通常约 1.1–1.2），不可预测，不建议在需要精确控制的场景使用
为什么用无单位数字比 px 更可靠
用 line-height: 1.6 而非 line-height: 24px，核心在于继承与响应式适配：
• 子元素若设置不同 font-size（比如 font-size: 14px），line-height: 1.6 会自动算出 22.4px 行高；而 24px 会被直接继承，导致小字号文字行距过大、视觉拥挤
• 在媒体查询中调整字体大小时，无单位值能自然联动，避免漏改多处 line-height
• Flex 或 Grid 容器内文本对齐（如垂直居中）也更稳定，因行高参与行框（line box）高度计算
line-height 太小或太大时的典型表现
行高设置不当会直接破坏可读性，常见现象包括：
• line-height: 1：相邻行文字紧贴，标点（尤其是下伸字母 g、y 和上伸字母 b、h）易重叠，阅读吃力
• line-height: 3 或更高：段落像被“拉稀”，节奏断裂，视线难以自然下行
• 中文混排英文/数字时，若未设足够行高（如仅 1.2），汉字字怀紧凑，英文基线与汉字底部对齐偏差会更明显，造成视觉跳动
• 实际项目中，正文常用 1.5–1.7，标题可略低（1.2–1.4），移动端可微调至 1.6–1.8 提升触控间距感
line-height 影响垂直对齐的原理
当用 line-height 实现单行文本垂直居中（如按钮内文字），本质是让行框高度撑满容器：
• 容器需有明确高度（如 height: 40px）且 overflow: hidden 不干扰
• 设置 line-height: 40px 后，文本基线位置由行框内部半行距+半内容区决定，而非简单居中
• 若同时设置 vertical-align: middle，只对 inline 元素生效；对块级元素无效，此时应改用 flex（display: flex; align-items: center）
• 注意：若字体本身带有较大上下留白（如某些 icon font 或 variable font），line-height 可能无法完全覆盖，需结合 padding 微调
line-height 值在不同字体家族下视觉效果可能差很多——比如思源黑体和 Helvetica 的 x-height 差异，会让同样 1.6 的行高看起来松紧不一。 
