Aligning text input with the submit button

Get Started
1

They are both the same height, but they are uneven.

image

Which of these would get:

vertical-align: top;

vertical-align: bottom;

input[type=text] {
  font-size: 22px;
  width: 200px;
  color: #0059dd;
  background: #000000;
  border: 1px solid #0059dd;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  height: 31px;
  background: black;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}
4

They are NOT both the same height because the actual height occupied by different font families of the same size is unlikely to be the same (most likely different). The actual height depends on the space built into the structure of the font-family to allow for ascenders and descenders.

In your code,
input[type=submit] and label
are assigned
font-family: "Times New Roman", Times, serif;

however

input[type=text]
has not been assigned the same font-family. In fact, it has not been assigned a font-family at all. So the font-family that is used to display input[type=text] is the default font-family used by the user’s browser… which could be anything.

An easy solution is to assign all three items the same font-family and font-size.
Use different colors and/or background colors or outlines for effect (things that do not influence the height or width of a box).

And ONCE AGAIN, allow me to mention that you should NOT need to assign a fixed height to input[type="submit"]

One upon a time, long long ago, I found a very good slide show that explained the structure of fonts. If I can find it again, I’ll add it to this topic for you to study. I really enjoyed it :slightly_smiling_face:

1 Like
5

Like this then:

label {
  font-size: 22px;
  color: #0059dd;
  font-family: "Times New Roman", Times, serif;
}

input[type=text] {
  font-size: 22px;
  height: 31px;
  width: 200px;
  color: #0059dd;
  background: #000000;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
  cursor: pointer;
  height: 35px;
  background: black;
  border: 1px solid #0059dd;
  font-family: "Times New Roman", Times, serif;
}
6

or perhaps something like this:

label,input {
  color: #0059dd;
  font-family: "Times New Roman", Times, serif;
  font-size: 22px;  /* em or rem are better than px because px do not scale */
}
input {
  background: black;
  border: 1px solid #0059dd;
}
input[type=text] {
/*  height: 31px;  /* fixed heights are NOT RECOMMENDED. DELETE ME! */
  width: 200px;
}
input[type=submit] {
  cursor: pointer;
/*  height: 35px;  /* fixed heights are NOT RECOMMENDED. DELETE ME! */
}
2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.