line-height 在按钮中并非设置高度的手段，而是控制单行文本行框垂直空间，需同时满足 height 固定、无换行、无干扰 padding/border 三条件才可靠；现代开发更推荐用 padding 或 flex 实现垂直居中。
line-height 在按钮中不是用来“设置按钮高度”的间接手段，而是控制按钮内文字所在行框的垂直空间——它只对单行文本有效，且必须配合 height 和无换行才能实现垂直居中。
button 里用 line-height 垂直居中，只适用于单行
这是 line-height 最常被误用也最易翻车的场景。它生效需同时满足三个条件：
-
height显式设为固定值（如height: 40px），不能是auto或min-content - 按钮内容为纯文本、无换行（
white-space: nowrap是保险做法） - 按钮无
padding或border，或已把它们从高度中扣除（例如height: 40px+padding: 8px→ 实际文字区高 24px →line-height必须设为24px）
典型可靠写法：
.btn {
height: 40px;
line-height: 40px;
white-space: nowrap;
padding: 0;
border: none;
}一旦加了 padding: 10px 16px，这个 line-height: 40px 就会撑高整个按钮到 60px，而不是居中文本。
为什么 line-height 在 button 里经常“不生效”？
常见现象：写了 line-height: 40px，但文字还是贴顶。原因往往不是属性失效，而是：
- 按钮用了
display: flex（现代框架默认），此时align-items: center才管垂直居中，line-height被忽略 - 按钮有
padding，而你没重算文字区高度，line-height值仍按总高设 - 按钮内容含图标（
<svg></svg>或<img>），这些是替换元素，line-height只影响文本基线，不拉齐图片 - 字体本身带过大上下留白（如思源黑体），
line-height: 40px看似够，实际文字视觉上仍偏上
验证方法：在 DevTools 中给按钮加 border: 1px solid red，再看文字是否真在红色框正中——别信“看起来差不多”。
更稳的按钮高度控制方式
靠 line-height 控高本质是 hack，真正可控的方式是：
- 用
padding：如padding: 12px 24px，高度 =font-size+ 上下padding× 2，兼容性最好 - 用
height+flex：设display: flex; align-items: center; justify-content: center;，删掉所有line-height - 用
grid：display: grid; place-items: center;，同样无视line-height - 避免混合单位：不要
line-height: 2em配font-size: 16px，em会继承父级字号，容易错乱
如果按钮要响应式缩放（比如根字号用 rem），padding 比 line-height 更可预测；若必须用 line-height，请坚持无单位值（如 line-height: 2.5），它会随当前 font-size 自动缩放。
真正难的不是写对 line-height，而是判断它该不该出现在按钮样式里——多数时候，删掉它，改用 padding 或 flex，反而更快更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
