button元素的line-height无效是因为它是替换元素，其内部行框行为由浏览器接管；应改用padding或flex布局实现垂直居中。
button元素的line-height为什么设了没反应
因为
实操建议：
• 不要依赖line-height控制按钮内文字垂直居中
• 改用padding显式撑开上下空间，例如padding: 12px 24px
• 若需精确对齐，配合display: flex + align-items: center更可靠
• 避免在font简写后覆盖line-height——虽然font会重置line-height，但
span或a标签设line-height无效？先看display值
span、a这类元素默认是display: inline，而line-height在纯内联非替换元素上只影响所在行框高度，不改变自身尺寸。所以你设了line-height: 2，但文字看起来没动，不是失效，是它根本没“盒子”可撑。
实操建议：
• 检查开发者工具「Computed」面板里的display值，确认是不是inline
• 要独立控制行高，加display: inline-block或display: block
• 若需保持行内流布局，改用vertical-align: middle配合父容器的line-height调整视觉位置
• 别对img设line-height——它是替换元素，该属性不作用于它
font简写覆盖line-height？顺序问题真存在，但仅限非替换元素
当font简写属性出现在line-height之前时，它会把line-height重置为normal（浏览器默认值）。这个现象在p、div等块级元素上明显，但在button上无关紧要——因为它本来就不响应line-height。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
实操建议：
• 对文本容器（如p、div），把line-height写在font之后，或拆开写成font-size、font-weight等单独声明
• 全局统一用无单位数值（如line-height: 1.5），避免font: bold 16px/24px sans-serif这类带行高的简写引发继承混乱
• 在button上不要试图靠font顺序修复line-height——换思路，用padding或flex
display:inline-block后line-height突然生效？这是盒模型切换的结果
把span设成display: inline-block后line-height“变有效”，本质不是属性突然被支持，而是元素获得了块级盒模型控制权：它开始生成自己的行框，line-height才能真正参与计算。
实操建议：
• inline-block元素的line-height会影响其内容垂直居中，但要注意vertical-align默认是baseline，常导致底部留白
• 若多个inline-block元素排列错位，优先调vertical-align: top/middle/bottom，而不是硬调line-height
• line-height对input[type="text"]也无效——它和button一样，高度由height + padding + 字体决定
最易被忽略的一点：line-height从来不是“让文字居中”的银弹。它只设定行框高度，真正决定文字在其中位置的是vertical-align（对行内盒）或align-items（对flex子项）。按钮场景下，直接放弃line-height，从padding或flex切入，反而省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
