您是否声明了框大小，以便它根据边框进行调整？
在HTML中，除非指定，否则填充、边框和内容不包括在元素在页面中占用的总空间中。这意味着，默认情况下，样式（HTML或CSS）中的元素指定的大小专门用于内容，因此填充和边框将占用额外空间。
这是我刚刚画的一张图，解释了HTML/CSS中框大小和内容大小之间的区别：
box-sizing in HTML
为了避免这种情况，您可以：
1.手动考虑填充，边框宽度和内容宽度，使所有这些加在一起为100%（这是很难的，你需要计算填充和边框，如果不是只有一边通常是双倍%）。
1.或者将方框大小调整到边框：

html {
  box-sizing: border-box;
}

我个人推荐第二个，因为你不需要计算任何其他东西，但如果你不想使用它，也许你可以使用函数'calc（）'，使之更容易。
最后，我建议你避免在CSS中使用这么多样式，而不是在HTML中。
有许多块类型的html元素（aside，section，article，fieldset）在语义上更具体，最终学习这些可能是好的和坏的HTML实践之间的区别。

这有两个原因：

• 输入具有浏览器设置的缺省填充
• 在边界处添加2px
• • 编辑**

正如注解中提到的Anas Mohammad Sheikh，您可以通过设置box-sizing:border-box来修复它

.container {
  border: 1px dashed grey;
  padding: 50px;
}

.content {
  border: 1px solid green;
  width: 100%;
  padding: 20px 0;
}

input {
  border: 1px dotted red;
  width: 100%;
  box-sizing: border-box;
}

<div class="container">
  <div class="content">
    <input placeholder="placeholder">
  </div>
</div>

• • 上一个答案**

在这里，我删除了padding: 0的填充，并将输入减少了2 * 边框大小（用于左和右）。
一个二个一个一个
在本例中，width: calc(100% - 2 * var(--border))与width: calc(100% - 2px)相同
注：padding: 20px 0 20px 0与padding: 20px 0相同