为什么CSS的line-height会导致按钮高度异常？-css教程-PHP中文网

button上设line-height常无效或错乱，因firefox等浏览器在ua样式中强制line-height:normal，chrome/safari行为也不统一；它仅控制行框内文字位置，不参与盒模型高度计算，真实高度由height、padding、字体度量共同决定。

为什么css的line-height会导致按钮高度异常？

button上设line-height为什么没反应或高度错乱

因为绝大多数浏览器（尤其是 Firefox 和 Opera）对 button、input[type="submit"] 等表单控件的 line-height 有硬性限制：它们默认把 line-height: normal !important 写死在 UA 样式里，你写的 line-height 会被直接忽略。

Chrome/Safari/Edge 虽然支持，但行为也不统一——比如你设 line-height: 40px，它可能只影响文字基线位置，而不会改变按钮整体高度；实际高度仍由 height + padding + 字体大小共同决定。

Firefox 下写 line-height: 50px 完全无效，开发者工具里能看到 computed 值仍是 normal
即使生效，line-height 作用对象是“行框”，不是按钮盒子本身；它不参与盒模型 height 计算，只微调文字在行内的垂直位置
若同时写了 height 和 line-height，且未设 box-sizing: border-box，padding/border 会额外叠加，导致最终高度超出预期

按钮高度到底由什么决定

按钮的真实高度 = height（如果显式设置）或 2 × padding-top + font-size + 行距余量（如果没设 height）。这里的“行距余量”不是 line-height，而是浏览器根据字体度量（ascent/descent）自动预留的空间。

也就是说：line-height 对按钮高度没有直接控制权。它只在按钮内容为纯文本、且未被其他样式覆盖时，间接影响文字在可用空间内的视觉位置。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

显式设 height: 40px + padding: 12px 16px → 实际内容区高 = 40px − 24px = 16px，此时 line-height: 16px 才可能让单行文字视觉居中
没设 height，只靠 padding 和 font-size 带出高度 → 按钮高度随字体渲染差异浮动，iOS Safari 和 Windows Chrome 可能差 2–3px
用了自定义字体（如 Inter、SF Pro）→ ascent 值偏高，文字看起来“上浮”，此时调 line-height 无法修正，必须换布局方式

什么时候 line-height 会让按钮变高得离谱

典型场景是误把 line-height 当作“整体高度控制器”来用，尤其在 flex 容器里嵌套按钮时。

例如父容器设了 display: flex; align-items: center;，按钮又写了 line-height: 60px —— 这时按钮内部行框被撑高，但 flex 仍按内容尺寸分配空间，结果按钮被拉高、文字却卡在顶部，视觉上像“多了一截空白”。

在 display: flex 或 display: grid 容器中，line-height 对子元素垂直对齐完全失效，align-items 才是唯一有效手段
给按钮加了 vertical-align: middle，又配 line-height → 二者冲突，基线重新计算，高度不可预测
响应式中用 rem 设置 font-size，但 line-height 写成 24px → 缩放后行高固定，内容区比例失衡，小屏下文字贴底或溢出

真正可控的按钮高度方案

放弃用 line-height 控制按钮高度，改用明确的盒模型控制。这是最省调试时间的做法。

定高按钮：用 height + padding + box-sizing: border-box，文字居中交给 display: flex; align-items: center; justify-content: center;
不定高按钮：去掉 height，只设 padding 和 font-size，用 min-height 防止过矮，文字居中用 display: grid; place-items: center;
兼容 IE11 的底线方案：height + padding + line-height: normal + vertical-align: middle（仅对纯文本有效）
绝对不要在 flex 按钮里再写 line-height —— 它不会帮你居中，只会让文字上下跳动