按钮内文字折行行距过大，本质是line-height在inline-block按钮中被放大；应避免无单位大值，优先用1.2～1.4倍，固定高时设line-height等于height，多行居中推荐flex，移动端须用无单位line-height。
按钮内文字折行后行距过大，本质是line-height在块级上下文里被放大了
按钮（button）默认是display: inline-block，内部文字换行时，line-height会作用于每一行的「行框」，而浏览器对按钮这类替换元素的行高计算比普通p更敏感——尤其当font-size小但line-height设得大（比如2或24px），折行后两行文字中间就会出现明显“空洞”。
- 别给
button直接设line-height: 2这种无单位大值，它会按按钮整体高度反向挤压内容，反而让折行更松散 - 优先用
line-height: 1.2～1.4这种紧致倍数，中文按钮尤其推荐1.3 - 如果按钮有固定高度（如
height: 40px），line-height应等于该值（如line-height: 40px），强制单行居中；折行时则需配合padding控制垂直余量，而非依赖line-height
button上设line-height无效？检查是否被padding或height覆盖
常见现象：写了button { line-height: 1.3; }，但文字还是贴顶或撑满。这不是line-height失效，而是height或padding优先级更高：
-
height显式设值时，line-height仅控制行内基线位置，不改变容器高度——此时行距感知被弱化 -
padding-top/padding-bottom直接增加可点击区域，会“吃掉”line-height带来的视觉行距空间 - 解决办法：去掉
height，只靠padding+line-height组合控高。例如：padding: 8px 16px; line-height: 1.3;，让文字自然撑开按钮
多行按钮文字垂直居中难？用flex替代line-height
当按钮内文字必须折行且要求严格居中时，line-height已不是最优解——它无法保证多行文本整体在按钮内垂直居中，尤其在字体不同时。
- 把
button设为display: flex，再加align-items: center; justify-content: center; - 保留
line-height: 1.3控制单行内行距，flex负责整体居中 - 注意：IE11不支持
flex在button上，若需兼容，改用display: table-cell+vertical-align: middle，但语义性稍弱
移动端按钮折行后行距突变？响应式line-height要避免px单位
用line-height: 20px这类绝对值，在rem或viewport缩放时完全不会变，导致小屏下文字挤成一团、大屏下又空得离谱。
- 始终用无单位数值，如
line-height: 1.3，它随font-size缩放，和rem天然协同 - 如果按钮字体本身用
vw或clamp()动态变化，line-height: 1.3仍能保持比例稳定 - 调试时打开开发者工具，选中按钮，看Computed面板里
line-height是否显示为“1.3”（而不是计算后的像素值），确认它没被转成绝对长度
真正卡住人的地方，往往不是不知道设line-height，而是没意识到按钮是个特殊上下文：它的行高既受内联格式影响，又被块级尺寸约束，还常和padding、height打架。调的时候先关掉height，用padding和无单位line-height打底，再按需加flex居中——比硬调数值靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
