0

I can't seem to figure out why my input has padding on the right side of it, here's my html and css code:

* {
  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

I'm sure somebody else has to be having this problem as well. I've even set the padding and margin for everything to 0, but this still occurs. Is this just how input is supposed to function?

j08691
  • 204,283
  • 31
  • 260
  • 272
Connor Roberts
  • 1
  • 2

1 Answers1

2

Inline elements are sensitive to the white space in your code. Just remove it:

* {
  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>
j08691
  • 204,283
  • 31
  • 260
  • 272
  • WTF Thank you, I've got to wait 10 minutes to mark the answer as accepted. But now my code looks ugly!!!! I have to put all inputs on one line? Is there another option? – Connor Roberts Oct 16 '18 at 14:06
  • Yes, see the duplicate that your question was closed for. It has a couple of alternate methods that do the same thing. – j08691 Oct 16 '18 at 14:11