如何修改HTML按钮的行高属性-html教程-PHP中文网

button 的 line-height 常“不生效”是因为被 height、padding 覆盖或替换元素计算逻辑限制；应优先用 padding 控高、无单位 line-height 控字行间距，折行时改用 flex 居中。

如何修改html按钮的行高属性

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

推荐写法示例：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

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 继承上。