为什么输入框在给它填充 100% 宽度后离开 div 框

Question

我正在尝试创建一个与容器宽度 100% 相同的表单输入，但一切正常，直到我为输入框提供填充，并且当我为<input type="text"> <input type="password">这两个框使用填充时，<input type="button">它离开了 div工作正常谁能告诉我是什么问题以及如何解决它..

 body{
        background-color: #eee;
        font-family: Arial;
      }
      .login {
          width: 400px;
          background-color: white;
          margin: 0 auto;
          margin-top: 40px;
          text-align: center;
          padding: 5px 15px 30px 15px;
          box-shadow: 1px 1px 3px RGBA(0, 0, 0, 0.39);
      }
      input {
          width: 100%;
          padding: 10px 13px;
          margin-bottom: 10px;
      }

    <div class="login">
      <h2>Log In</h2>
      <form>
        <input type="text" placeholder="Email">
        <input type="password" placeholder="Password">
        <input type="button" value="Log In">
      </form>
    </div>

Answer 1

这就是盒模型的工作原理。当您添加 100% 宽度时，它会应用于内容。还有一个额外的填充打破了对齐。但是您可以更改框模型以计算边框的宽度。

将框大小添加到输入字段

input {
  box-sizing: border-box;
}