登录表单外框与输入框适配问题：如何缩小外框尺寸？

别担心，第一次做表单碰到这种情况太正常啦！你的问题根源在于当前的form样式只定义了边框，没限制它的宽度——默认情况下表单会撑满父元素的宽度，自然就和内部输入框显得不匹配了。这里给你几个简单直接的调整方案：

1. 给表单设置宽度限制 #

你可以给form添加width或max-width属性，让外框尺寸和输入框适配：

form {
  border: 3px solid #f1f1f1;
  /* 固定宽度，比如设为400px，和输入框适配 */
  width: 400px;
  /* 或者用max-width，让表单在小屏幕上自动缩小，更适配移动端 */
  max-width: 90%;
  /* 加上内边距，让输入框和边框之间留些空白，不会挤在一起 */
  padding: 20px;
}

2. 让表单居中显示（可选） #

如果想让表单在页面中间展示，还可以加上自动外边距，左右会自动留白：

form {
  border: 3px solid #f1f1f1;
  max-width: 400px;
  padding: 20px;
  margin: 20px auto; /* 上下留20px间距，左右自动居中 */
}

3. 确认输入框的适配性 #

你的输入框已经设置了width: 100%和box-sizing: border-box，这两个属性搭配得很好——输入框会自动填满表单的宽度，而且padding不会让它超出外框范围，完美适配调整后的表单尺寸。

你可以根据自己的视觉需求，微调width、padding的数值，直到表单外框和输入框的比例看起来舒服为止！

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