React输入框设置width:300px却显示322px，如何修正？

这是CSS盒模型的默认行为导致的：

• 默认盒模型为content-box，设置的width仅代表内容区域的宽度，padding和border会额外添加到总宽度中
• 你的输入框设置了左右padding: 10px（总计20px）、左右border: 1px（总计2px），300+20+2=322px，正好是实际显示的宽度

解决方案 #

给输入框添加box-sizing: border-box属性，让设置的width包含内容、padding和border的总宽度：

input {
  width: 300px;
  padding: 15px 10px;
  border: 1px #818181 solid;
  border-radius: 12px;
  box-shadow: 0px 0px 3px #818181;
  box-sizing: border-box; /* 新增属性 */
}

如果希望项目中所有元素都统一这种盒模型（避免重复踩坑），可以全局设置：

* {
  box-sizing: border-box;
}

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