为何设置相同350px宽度的提交按钮比其他输入框更窄？

问题根源 #

这是不同表单元素的默认盒模型（box-sizing）规则不一致导致的：

• 普通文本/密码/邮箱输入框，默认box-sizing为content-box：你设置的width:350px仅指代内容区宽度，最终总渲染宽度 = 内容宽度 + 左右padding + 左右边框宽度
• 提交按钮类元素，部分浏览器默认box-sizing为border-box：你设置的width:350px已经包含了padding和边框的宽度，最终总渲染宽度就是350px

所以哪怕你给所有元素设置了同样的width属性，两者的实际渲染宽度也会出现差异。

解决方案 #

直接全局统一盒模型规则即可，在CSS的最开头加入以下代码：

* {
  box-sizing: border-box;
}

这段代码会让页面所有元素的宽度计算都统一为border-box模式，width属性值直接对应最终渲染的总宽度，不会额外叠加padding和边框。
如果你不想影响全局元素，也可以仅给表单相关元素设置：

.input-field, .button {
  box-sizing: border-box;
}

额外优化建议 #

你可以删掉.button-submit里的width: 100%属性，避免和.registration-field的width: 350px出现优先级冲突（虽然当前CSS书写顺序下350px优先级更高，不会出问题，但冗余代码可以移除）。

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