按钮上min-height无效是因为其默认display为inline或inline-block，而min-height对inline元素无效；需显式设置display: inline-block或block，并配合box-sizing: border-box才能生效。
按钮上直接写min-height为什么没反应？
因为<button></button>默认是inline元素（或inline-block，取决于浏览器），而min-height对inline级元素无效。你看到它“不生效”，其实是 CSS 规范限制，不是写错了。
- 检查 computed style：用开发者工具看
button的display值，大概率是inline-block——这时min-height本该生效，但某些旧版 Safari 或 IE 会忽略 - 最稳妥解法：显式设
display: inline-block或display: block，再加min-height - 别只靠
line-height撑高：虽然line-height: 40px能让文字垂直居中并视觉上“变高”，但它不改变元素的实际高度盒模型，点击热区可能仍偏小
min-height和height混用在按钮上会出什么问题？
混用容易导致按钮在不同内容长度下行为不一致，尤其当按钮内含图标+文字、或文字换行时。
-
height: 40px+min-height: 40px：后者被前者覆盖，min-height完全失效 -
min-height: 40px+padding: 12px 16px：实际高度 =min-height+ 上下padding，可能远超预期；若想控制总高度，应改用height: 40px+box-sizing: border-box - Flex 容器里的按钮：父容器设了
align-items: center，子按钮即使写了min-height也可能被居中“压扁”，需确认父级是否加了min-height或height约束
移动端按钮最小高度要特别注意什么？
苹果 iOS 的可访问性指南要求触摸目标至少 44×44pt，min-height只是其中一环，不能单独依赖。
- 单纯写
min-height: 44px在高 DPR 屏幕（如 iPhone）上物理尺寸不足，应配合min-width: 44px和padding确保热区达标 - Safari 对
vh单位在地址栏收起/展开时重绘不稳定，min-height: 5vh这类写法在按钮上易导致跳动，优先用固定值（如44px）或rem - 按钮内含 SVG 图标时，图标本身可能带
height或vertical-align，干扰整体高度计算；建议统一用display: flex+align-items: center布局，再设min-height
要不要给按钮加box-sizing: border-box？
要，而且必须加。否则min-height + padding + border会导致按钮高度不可控。
- 默认
box-sizing: content-box：min-height: 40px只管内容区，上下padding: 8px和border: 1px会额外增加 18px 高度 → 实际最小高度变成 58px - 加
box-sizing: border-box后：min-height: 40px才真正代表“整个按钮框”的最小高度，padding和border向内压缩 - 推荐写法：
button { min-height: 44px; padding: 8px 16px; box-sizing: border-box; }
min-height必须和font-size、line-height、padding协同设计，而不是孤立设置一个数值。单独调高min-height却忘了调整内边距，结果按钮上下留白过大，或者文字被截断——这种细节在审查 UI 时才暴露，但修复成本远高于初始就定好组合规则。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
