Dan Dan - 4 months ago 15
HTML Question

Aligning components in forms

This is probably something I rather simple I am missing but in my form, I have an

input
of
type = "password"
and a
button
of
type = button
next to each other. After I managed to initially line everything up I decided to set the height to the same height for both components

I expected the outcome to look like this.

enter image description here

When I used the code below. However when you run the code below you will see the heights are different.



input[type="password"] {
float: left;
margin: 0px 0px 0px 2vw;
width: 150px;
height: 50px;
display: inline-block;
}

.form-ckbx {
display: inline-block;
width: 150px;
height: 50px;
}

<form>
<input type="password" class="form-inp" id="password" placeholder="Password">
<button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>





How am I able to fix this problem?

Note
I am aware of similar question such as this and this but the solutions seem to be ineffective in this case.

Answer

Input fields has by default a 1px padding as well as a 1 pixel border hence causing an additional 4px height. So try reset the input padding and adjust the button height in order to accommodate for the difference.

input[type="password"] {
  float: left;
  margin: 0px 0px 0px 2vw;
  width: 150px;
  height: 50px;
  padding:0;
  display: inline-block;
}

.form-ckbx {
  display: inline-block;
  width: 150px;
  height: 54px;
}
<form>
  <input type="password" class="form-inp" id="password" placeholder="Password">
  <button type = "button" class = "form-ckbx" id = "check" title="Show Password">Some Text</button>
</form>