space issue/ input issues with forms-CodePudding

So I created this form and am wondering why anytime I hover the input field moves up and the rest of the form increase in size but only a few px. am wonder this happen and also wondering how can I space them out so that they can stop touching one another, i tried using padding/margin but all it does is increase the rest of the form in size size.

<div >
  <form action="post">
    <div >
      <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
      </div>
      <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
      </div>
    </div>
    <div >
      <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
      </div>
      <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
      </div>
    </div>
  </form>
</div>

*,
*::before,
*::after {
  box-sizing : border-box;
  margin     : 0;
  padding    : 0;
  }
html {
  font-size   : 62.5%;
  font-family : Arial, Helvetica, sans-serif;
  }
body {
  font-size   : 1.22rem;
  line-height : 1.2;
  }
.form__wrapper {
  display     : grid;
  place-items : center;
  height      : 100vh;
  width       : 100%;
  }
form {
  display    : flex;
  background : #41ac13fd;
  padding    : 5rem 5rem;
  }
.form-container {
  display        : flex;
  flex-direction : column;
  }
.form-items input[type="text"] {
  padding : 0.5rem;
  }
.form-items input:focus {
  border  : 3px solid #d29e29;
  outline : none;
  }
form,
label,
input {
  display : flex;
  }

CodePudding user response：

Because you give them 3px border only on focus, when you focus on them they change borders from 1px to 3px and that's why they move a bit.

To solve that, just give them the exact border size before focus or hover but with different color or transparent.

and to add space between them, just add margin to form-items. not to inputs.

*,
*::before,
::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    font-size: 1.22rem;
    line-height: 1.2;
}

.form__wrapper {
    display: grid;
    place-items: center;
    height: 100vh;
    width: 100%;
}

form {

    display: flex;
    background: #41ac13fd;
    padding: 5rem 5rem;
}

.form-container {
    display: flex;
    flex-direction: column;
}

.form-items input[type="text"] {
    padding: 0.5rem;
}

.form-items {
    margin: 10px;
}

.form-items input {
    border: 3px solid #999;
}

.form-items input:focus {
    border: 3px solid #d29e29;
    outline: none;
}

form,
label,
input {
    display: flex;
}

<form action="">
  <div >
    <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
    </div>
    <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
    </div>
</div>

<div >
    <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
    </div>
    <div >
        <label for="firstname">FirstName</label>
        <input type="text" name="firstname" id="firstname" value="Fname" placeholder="FirstName">
    </div>
</div>
</form>