如何设置input[type="text"]的宽高使其与标准块元素的宽高一致？

这个问题的核心原因是表单控件（比如input、button这类元素）默认带有内置的padding和border样式，而且它们和div等普通块元素一样，默认盒模型是content-box——也就是说你设置的width和height仅指代元素内容区域的大小，加上默认的padding和border后，元素的整体尺寸就会超过你设置的值，自然比同宽高的div更大。

最简便的解决方案：统一盒模型 #

推荐使用box-sizing: border-box来统一所有元素的盒模型规则，这样你设置的width和height会包含padding和border，直接设置相同的数值就能让input和div尺寸完全一致。

修改你的CSS代码如下：

* {
  margin-top: 10px;
  display: block;
  font-size: 16px;
  text-align: center;
  border: 0;
  width: 100px;
  height: 50px;
  /* 关键新增：统一盒模型 */
  box-sizing: border-box;
}
input {
  background-color: coral;
  /* 如果你需要给input加padding或border，也不会影响整体尺寸 */
  /* 比如加个border：border: 1px solid #000; 整体宽高还是100px*50px */
}
button {
  background-color: lightblue;
}
div {
  background-color: lightgreen;
}

如果你不想修改盒模型（不推荐） #

可以手动计算input的宽高，公式为：

• input设置的width = 目标宽度 - input左右padding总和 - input左右border宽度总和
• input设置的height = 目标高度 - input上下padding总和 - input上下border宽度总和

但这个方法不实用，因为不同浏览器对表单控件的默认padding/border值可能存在差异，比如Chrome中input默认的左右padding是1px，上下是1px，border是2px；而Firefox的默认值可能不同，会导致跨浏览器不一致。

关于input放入div中仍超出的问题 #

你提到把input放在div里设置宽高100%仍会超出，本质还是盒模型的问题：input的100%宽度是div的内容区宽度，再加上自身的padding和border，就会超出div的范围。同样给input加上box-sizing: border-box就能解决这个问题。

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