What is causing that one pixel at the top (red and blue highlight) and on the side?

and I'm not missing a div at the bottom, SO is just removing it, not sure why

border-box helps a bit, but it is still 1pm from the top, despite there not being any margins.

Pastebin link of the full file https://pastebin.com/N5tGBX9X

imgur link

<div > 
<div >
    <form method="POST" action="#">
        <div style="box-sizing: border-box; border: 1px red solid; margin-bottom: 32px;">
            <label  for="email"><b>Email</b></label>
            <input  type="text" placeholder="" name="email" required></input>
        </div>

        <div style="box-sizing: border-box; border: 1px solid blue; margin-bottom: 32px;">
            <label  for="pswd"><b>Password</b></label>
            <input  type="password" placeholder="" name="pswd" required></input>
        </div>

        <div >
            <button type="submit" name="loginSubmit">Log In</button>
        <div>
    </form>
</div>

<style>
.outercontainer{
    width:320px;
    height: 96px;
    /*border: 1px dashed black;*/
    margin: 0 auto;
}

.namelabel{
    width: 30%;
    float: left;
    background-color: red;
    height: 100%;
}
.passwordlabel{
    width: 30%;
    float: left;
    background-color: blue;
}

input[type=text], input[type=password]{
    width: 70%;
    float: right;
    color:aqua;
    box-sizing: border-box;
    padding: 0px;
}

.loginbutton{
    text-align: center;
    box-sizing: border-box;
    margin: 0 auto;
}

/*Centers content into the middle of the screen*/
.center-screen {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 80vh;
}

CodePudding user response：

The border was not applied properly on div I added the display: flex; width: 100%; on the main div now it is working.

Without the display property div was not taking proper space.

Since I used flex I removed float property from input tags

.outercontainer {
  width: 320px;
  height: 96px;
  /*border: 1px dashed black;*/
  margin: 0 auto;
}

.namelabel {
  width: 30%;
  float: left;
  background-color: red;
  height: 100%;
}

.passwordlabel {
  width: 30%;
  background-color: blue;
}

input[type=text],
input[type=password] {
  width: 70%;
  color: aqua;
  box-sizing: border-box;
  padding: 0px;
  border: none;
}

.loginbutton {
  text-align: center;
  box-sizing: border-box;
  margin: 0 auto;
}


/*Centers content into the middle of the screen*/

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80vh;
}

<div >
  <div >
    <form method="POST" action="#">
      <div style="box-sizing: border-box; border: 1px red solid; margin-bottom: 32px; display: flex; width: 100%;">
        <label  for="email"><b>Email</b></label>
        <input  type="text" placeholder="" name="email" required></input>
      </div>

      <div style="box-sizing: border-box; border: 1px solid blue; margin-bottom: 32px; display: flex; width: 100%;"">
        <label  for="pswd"><b>Password</b></label>
        <input  type="password" placeholder="" name="pswd" required></input>
      </div>

      <div >
        <button type="submit" name="loginSubmit">Log In</button>
        <div>
    </form>
    </div>
    </div>

CodePudding user response：

I think it is the floats that are creating the problem.

Try it with display:flex;.

Here is how I would have done it.

.form-input {
  box-sizing: border-box;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.email-box {
  border: 1px red solid;
  background-color: red;
}

.password-box {
  border: 1px blue solid;
  background-color: blue;
}

.namelabel {
  // width: 30%;
  // float: left;
  // background-color: red;
  // height: 100%;
}

.passwordlabel {
  // width: 30%;
  // float: left;
  // background-color: blue;
}

input[type=text],
input[type=password] {
  // width: 70%;
  // float: right;
  color: aqua;
  box-sizing: border-box;
}

.loginbutton {
  text-align: center;
  box-sizing: border-box;
  margin: 0 auto;
}


/*Centers content into the middle of the screen*/

.center-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80vh;
}

<div >
  <div >
    <form method="POST" action="#">
      <div >
        <label  for="email"><b>Email</b></label>
        <input  type="text" placeholder="" name="email" required></input>
      </div>

      <div >
        <label  for="pswd"><b>Password</b></label>
        <input  type="password" placeholder="" name="pswd" required></input>
      </div>

      <div >
        <button type="submit" name="loginSubmit">Log In</button>
        <div>
    </form>
    </div>