为何设置width:100%的HTML输入框会超出包含它的div右侧边距？

问题原因 #

这是CSS默认盒模型（content-box）的特性导致的：

• 在content-box模式下，元素的width仅指代内容区域的宽度，元素的实际总宽度是 内容宽度 + 左右padding + 左右border。
• 你的代码里，父div的width:100%是指它的内容区域宽度等于上级容器的内容宽度；而input的width:100%是继承父div的内容宽度，但input自带1px的左右边框，这部分边框会额外占用宽度，最终input的总宽度变成「父div内容宽度 + 2px」，自然就超出了父div的右侧边界。

解决办法 #

方法1：修改盒模型（推荐）

给input设置box-sizing: border-box，让width属性包含内容区、padding和border的总宽度：

<div style="border: 1px dashed grey; padding: 50px;">
 <div style="border: 1px solid green; width: 100%; padding: 20px 0 20px 0">
  <input style="border: 1px dotted red; width: 100%; box-sizing: border-box;" placeholder="placeholder">
 </div>
</div>

如果想让页面所有元素都用这个盒模型，可以全局设置：

* {
  box-sizing: border-box;
}

方法2：计算宽度适配

如果不想修改盒模型，可以用calc()计算input的宽度，减去边框占用的尺寸：

<div style="border: 1px dashed grey; padding: 50px;">
 <div style="border: 1px solid green; width: 100%; padding: 20px 0 20px 0">
  <input style="border: 1px dotted red; width: calc(100% - 2px);" placeholder="placeholder">
 </div>
</div>

这种方式需要手动计算边框/内边距的总占用宽度，灵活性不如border-box。

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