html - 为什么输入框在以 100% 宽度填充后会超出 div 框

Question

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

 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% 宽度时，它会应用于内容。还有一个额外的填充会破坏对齐。但是您可以更改框模型以计算边框的宽度。

添加Box Sizing输入字段

input {
  box-sizing: border-box;
}