为什么我的输入在右侧有填充？

Question

我似乎无法弄清楚为什么我的输入在其右侧有填充，这是我的html和css代码：

* {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 10px;
  background-color: dimgray;
}

.login-wrapper {
  display: flex;
  color: white;
}

<div class="header">
  <div class="login-wrapper">
    <form action="do_login.php">
      <input type="text" name="email" placeholder="Email">
      <input type="password" name="password" placeholder="Password">
      <input type="submit" value="Login">
    </form>
    <form action="register.php">
      <input type="submit" value="Register" />
    </form>
  </div>
</div>

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

Image of input padding

我确定其他人也必须遇到这个问题。我什至将所有内容的填充和边距都设置为0，但这仍然会发生。这就是输入应该起作用的方式吗？

Answer 1

内联元素对代码中的空白敏感。只需将其删除：

* {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 10px;
  background-color: dimgray;
}

.login-wrapper {
  display: flex;
  color: white;
}

<div class="header">
  <div class="login-wrapper">
    <form action="do_login.php">
      <input type="text" name="email" placeholder="Email"><input type="password" name="password" placeholder="Password"><input type="submit" value="Login">
    </form>
    <form action="register.php">
      <input type="submit" value="Register" />
    </form>
  </div>
</div>

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>