input设置padding后height不生效，是因默认content-box盒模型使height仅作用于内容区，padding和border额外叠加；应设box-sizing:border-box，使height包含padding与border，并配合appearance:none消除浏览器原生样式干扰。
input 设置 padding 后 height 不生效？这是 box-sizing 的默认行为
input 是替换元素（replaced element），其默认 box-sizing 是 content-box。这意味着你设的 height: 40px 只控制内容区高度，而 padding 和 border 会额外加在它外面，最终总高度变成 40px + 2 × padding + 2 × border-width。浏览器没“算错”，只是按规范严格执行。
解决方法很简单：强制改用 border-box：
input {
height: 40px;
padding: 12px 16px;
border: 1px solid #ccc;
box-sizing: border-box; /* 关键 */
}
这样 height: 40px 就是最终渲染高度，内边距和边框都从这 40px 里扣。
为什么 type="search" 或某些浏览器下仍不准？检查 user agent 样式覆盖
Chrome 对 type="search" 有内置 appearance: searchfield，会重置部分盒模型行为；Safari 甚至可能忽略 box-sizing 直到显式设置 appearance: none。Firefox 在某些版本对 input[type="number"] 也有类似表现。
稳妥做法是统一剥离原生样式干扰：
- 加上
appearance: none（需带前缀：-webkit-appearance: none,-moz-appearance: none） - 确保
box-sizing: border-box在所有浏览器中生效 - 避免只写
height，可配合min-height防止内容撑高（比如输入长数字时）
示例：
input {
height: 40px;
padding: 10px 16px;
border: 1px solid #ddd;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
用 line-height 拉高 input？危险，别这么干
有人试过不设 height，只靠 line-height: 40px 垂直居中文本——这对单行文本看似有效，但问题很多：
-
line-height不影响 input 的实际盒高，仅影响行内内容定位，padding依然会外扩 - 在
type="number"或带清空按钮的type="search"中，按钮区域常被挤压或错位 - IE 和旧版 Edge 下
line-height对 input 渲染不可靠，高度忽高忽低 - 移动端 Safari 有时会因
line-height触发意外缩放或光标偏移
结论：不要用 line-height 控制 input 高度，它不是为此设计的。
响应式场景下 padding + height 组合更易出问题
当用 rem、em 或媒体查询动态调整 padding 时，如果 height 是固定像素值，很容易在某断点出现高度断裂（比如 padding 加大了 4px，但 height 没变，导致总高突增）。
推荐策略：
- 优先用
min-height替代height，允许内容自然撑开（尤其含 placeholder 或多语言文本时） - 若必须固定高度，把
padding和height绑定为同一单位（如全用rem），并在同一 CSS 规则块中维护 - 对移动端，加
font-size: 16px（防 iOS 缩放）并确保padding不小于 8px，避免触摸目标过小
最常被忽略的一点：即使写了 box-sizing: border-box，如果父容器用了 display: flex 且没设 align-items: center，input 仍可能因基线对齐（baseline）产生视觉错位——这不是高度计算问题，但看起来像。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
