如何修复React.js中输入框文本重叠1-2像素的问题？

输入框内文本向上偏移1-2像素，大概率是行高、内边距的搭配问题，或是浏览器默认样式干扰了垂直对齐。结合你的SCSS代码，试试以下几种调整方式：

方案1：强制垂直居中对齐 #

给输入框显式设置行高和垂直对齐属性，让文本在容器内居中：

.find-input {
  color: white;
  width: 100%;
  box-sizing: border-box;
  background-color: #262B36;
  padding: 13px 20px;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  border: none;
  border-radius: 4px;
  // 添加以下两行
  line-height: 1; // 与字体大小匹配，或设为16px，根据实际效果微调
  vertical-align: middle;
}

.find-input:focus {
  outline: 1px solid blue;
}

方案2：微调内边距平衡行高 #

如果方案1效果不佳，可调整上下内边距，让文本位置更居中：

.find-input {
  // 把原有padding调整为更对称的数值，比如减少1px上内边距
  padding: 12px 20px;
  line-height: 1.2; // 适当增加行高，给文本足够空间
  // 其他原有样式保留
}

方案3：清除浏览器默认样式 #

部分浏览器会给输入框添加默认的行高或内边距，可提前重置：

// 在全局样式或组件样式开头添加
input {
  margin: 0;
  padding: 0;
  line-height: normal;
}

调整后刷新React页面验证效果，若仍有偏移，可逐步修改line-height和上下内边距的数值，直到文本对齐正常。

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