How is the text input measured?

HTML & CSS
1

According to this it’s 27 px in height:

When I measure it myself it’s 29 px in height + 1 px bottom, + 1 px top = 31px height.



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

Updated:
Fixed:

  height: 31px;
  box-sizing: border-box;
3

It has a default UA (User Agent i.e. Browser) padding top and bottom of 1px. = 31px total

1 Like
4

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