求助：textarea与<p>并排时失焦后尺寸莫名增大3px

嘿，这个问题我之前做表单对齐的时候也踩过坑！大概率是浏览器给表单元素加的默认聚焦/失焦样式差异，或者是textarea的一些默认属性没重置干净导致的。咱们一步步来搞定：

核心原因分析 #

你已经加了box-sizing: border-box（这点很赞，避免了盒模型计算混乱），但浏览器对textarea的默认样式在聚焦/失焦状态下有细微差别——比如部分浏览器会给失焦的textarea加1px边框，聚焦时换成外部的outline（不占布局空间），但如果你的<p>元素没有对应边框，或者textarea的边框/行高和<p>没完全对齐，就会出现尺寸跳变的错觉；另外，textarea默认的resize功能也可能在某些情况下触发奇怪的布局计算。

具体解决方案 #

1. 统一聚焦/失焦状态的边框与轮廓样式 #

给#keyInput添加以下CSS，手动覆盖浏览器默认样式，确保两种状态下的布局尺寸完全一致：

#keyInput {
  /* 你的原有样式 */
  text-transform: uppercase;
  float: left;
  margin-right: 10px;
  word-wrap: break-word;
  box-sizing: border-box;
  line-height: /* 必须和你的<p>元素行高完全一致！比如1.5或者20px */;
  /* 新增重置样式 */
  border: 1px solid #ccc; /* 统一边框样式，和<p>元素的边框/视觉占位对齐 */
  padding: 4px 6px; /* 匹配<p>元素的内边距，确保内容区域一致 */
  outline: none; /* 去掉默认聚焦轮廓，避免它干扰视觉判断 */
  resize: none; /* 禁用拖拽调整大小，彻底排除尺寸变动可能 */
}

/* 自定义聚焦样式，保留交互反馈（别丢了 accessibility！） */
#keyInput:focus {
  border-color: #66afe9; /* 用一个明显的颜色标识聚焦状态 */
  box-shadow: 0 0 0 2px rgba(102, 175, 233, 0.25);
}

2. 严格匹配<p>元素的所有布局属性 #

一定要确保textarea的line-height、padding、border-width和你的<p>元素完全相同——因为rows="1"的textarea高度是由这些属性共同计算出来的，哪怕差1px都会导致视觉上的错位。

3. 用开发者工具排查差异 #

如果还是有问题，打开浏览器开发者工具（F12），分别查看textarea聚焦和失焦状态下的**盒模型（Box Model）**面板，对比width、height的计算值，以及border、padding等属性的差异，就能精准定位是哪个属性在搞鬼。

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