设置相同宽高的input与button显示尺寸不一致问题求助

AI 小北

2026-7-13

问题原因及解决方案

核心原因

你遇到的问题是浏览器对表单元素（input、button）的默认样式差异，以及全局box-sizing设置未正确传递给这两个元素导致的：

box-sizing未继承：你仅给html, body设置了box-sizing: border-box，但该属性默认不会自动传递给子元素，input和button仍使用浏览器默认的box-sizing: content-box，此时设置的width/height仅代表内容盒尺寸，再加上浏览器默认的内边距差异，最终显示尺寸就会不同。
默认内边距与字体样式差异：浏览器会给button默认添加左右内边距（比如Chrome中默认是padding: 1px 6px），而input[type="text"]的默认内边距通常不同；部分浏览器中button的默认line-height、font-size也可能和input不一致，进一步导致内容盒尺寸差异。

解决方案

方案1：统一全局元素的`box-sizing`

在CSS开头添加全局选择器，让所有元素继承border-box：

* {
  box-sizing: inherit;
}

html, body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;
  background-color: #EEF0F4;
}

方案2：直接重置并统一input和button的样式

明确设置两个元素的box-sizing、内边距、字体相关属性，彻底消除浏览器默认差异：

input, button {
  margin-top: 13px;
  border: none;
  border-radius: 7px;
  width: 10em;
  height: 3em;
  box-sizing: border-box; /* 强制使用border-box */
  padding: 0 1em; /* 统一内边距 */
  font-family: inherit; /* 继承全局字体 */
  font-size: 1rem; /* 统一字体大小 */
  line-height: 1; /* 统一行高 */
}

input {
  color: #432000;
  background-color: #DCE1EB;
}

button {
  color: #FDFDFD;
  background-color: #AC485A;
}