Chrome中input元素多出2像素高度的原因及line-height:1使用建议咨询

架构老林

2026-5-20

Chrome中与

嘿，这个问题我之前做表单样式的时候也踩过坑，咱们来好好捋一捋～

一、额外2像素高度的来源

其实这主要是Chrome浏览器对<input>和<button>这两个表单元素的默认渲染规则差异导致的，具体有几个关键点：

盒模型默认值不同：Chrome给<button>默认设置了box-sizing: border-box，而<input>默认是content-box。这意味着当两者的字体、边框、内边距属性完全一致时，<input>的总高度是「内容高度 + 边框 + 内边距」，而<button>的总高度会把边框和内边距包含在内容高度计算范围内，最终表现为<input>总高度多出2px。
line-height继承差异：虽然你给body设置了line-height: 1，但<button>在Chrome中默认不会继承这个值，它的line-height是浏览器内置的normal（通常对应1.2左右的行高），而<input>会继承line-height:1。结合盒模型的差异，最终放大了两者的高度差。
垂直对齐方式影响：<input>默认的vertical-align: baseline，而<button>默认是vertical-align: middle，这种对齐方式的差异也会让两者在视觉上呈现出明显的高度差，尤其是在line-height较小的时候。

line-height:1虽然能让行高和字体大小完全匹配，适合一些需要精准垂直对齐的场景，但也有不少需要注意的地方：

单独处理表单元素：表单元素（比如<input>、<button>、<select>）的默认渲染规则和普通文本元素差异很大，建议单独给这些元素设置line-height，比如设置为line-height: normal或者和字体大小匹配的具体数值，避免出现高度不一致的问题。
全局设置时添加例外：如果要给全局设置line-height:1，可以用CSS选择器排除表单元素，示例代码如下：
```
body {
  line-height: 1;
  margin: 0;
}
input, button, select, textarea {
  line-height: normal;
  box-sizing: border-box;
}
```
注意文本溢出风险：当line-height:1时，如果字体本身带有上下延伸的装饰部分，文本可能会被裁剪，这时候可以适当调整为line-height:1.1或者1.2，兼顾精准性和可读性。
统一全局盒模型：给所有元素设置box-sizing: border-box能避免很多因为盒模型不同导致的高度、宽度计算差异，这是前端样式重置里的常用技巧：
```
* {
  box-sizing: border-box;
}
```

内容的提问来源于stack exchange，提问作者user2651804