button 的 line-height 常“不生效”是因为被 height、padding 覆盖或替换元素计算逻辑限制；应优先用 padding 控高、无单位 line-height 控字行间距，折行时改用 flex 居中。
button 的 line-height 为什么经常“不生效”
不是它失效了，而是你写的值被其他样式覆盖或计算逻辑绕过了。常见现象：设了 line-height: 1.5，但文字还是贴顶、撑满、或折行后空隙巨大。根本原因有三个：
— height 显式存在时，line-height 只影响行内基线位置，不改变容器高度；
— padding（尤其是 padding-top/padding-bottom）直接占据垂直空间，把 line-height 的视觉效果“吃掉”了；
— button 是替换元素，浏览器对它的行框计算比普通 div 更保守，尤其在小 font-size + 大无单位 line-height 组合下，折行会放大间隙。
怎么正确设置 button 的 line-height
核心原则：别单独依赖 line-height 控高，它只管“字行内部间距”，不管“按钮整体高度”。真正可控的组合是：
— 去掉 height（除非你明确要固定单行）
— 用 padding 定义可点击区域上下留白
— 用 line-height 控制单行内文字紧凑度
— 折行且需居中？改用 display: flex
推荐写法示例：
button {
padding: 8px 16px;
font-size: 14px;
line-height: 1.3; /* 中文按钮建议 1.2–1.4 */
}若按钮必须折行并垂直居中：
立即学习“前端免费学习笔记（深入）”；
button {
display: flex;
align-items: center;
justify-content: center;
padding: 8px 16px;
line-height: 1.3; /* 仍保留，控制每行内部间距 */
}移动端和响应式场景下的坑
绝对单位如 line-height: 20px 在 rem 缩放、viewport 变化或字体动态调整（比如 clamp()）时完全失联——小屏挤成一团，大屏空得吓人。必须用无单位数值：
— ✅ line-height: 1.3（随 font-size 等比缩放）
— ❌ line-height: 20px 或 line-height: 150%（后者继承的是计算后的绝对值，子元素无法再缩放）
— 如果按钮字体本身用了 vw 或 clamp(1rem, 4vw, 1.2rem)，只有无单位 line-height 能保持比例稳定
调试时看哪里才准
打开开发者工具，选中按钮，在 Computed 面板里找 line-height 这一项。如果显示为 1.3（或类似数字），说明样式已生效；如果显示为 normal 或一个像素值（如 19px），就说明被更高优先级规则覆盖了，或者父级设置了 font-size: 0 导致计算异常。此时不要猜，直接点开右侧的 Styles 面板，逐条检查哪条规则在覆盖它——90% 的问题出在未重置的 height 或全局 body 的 line-height 继承上。
