Set actual height for input

Question

So I have this input:

 <input type="number" class="inv_1"/>

And I try to set height:

.inv_1 {
    width: 50%;
    height: 32px;
}

What I expected: an input tag with 32px height. What I got: an input tag with 38px height.

I set it at 26px now, so I get 32px. The question is, can I set actual height? I want that element have the same height as in CSS. Just like divs and buttons which somehow have 32px with that class.

I wish CSS had "actual" properties. For example: "actualheight: 32px" and it's 32px. Same for width, text align, borders, padding, etc. Imagine how cool it is, to get what you wanted, not what you need to fight with.

(UPD: thanks for answers, works perfectly with box-sizing: border-box. Unfortunately I can only "accept" one answer)

You need to look at your textbox in the browser dev tools, another more global style for input fields may be overriding yours as the code you have shared worked as it should when dropped into JsFiddle. Meaning the height matches what is specified in the CSS in this case 32px. — Kyle, Jan 13 '21 at 17:41
@Kyle you miss the obvios issue. The default padding and border behavior. The 32px are not taking that into account. He needs to simply use `box-sizing: border-box;` instead of the default `content-box` or remove the default border and padding. There is nothing wrong with the CSS or oevrwriting the styling. — tacoshy, Jan 13 '21 at 17:46

chazsolo · Accepted Answer · 2021-01-13T17:47:02.380

Change the box-model property box-sizing to border-box. Your height "inconsistency" is due to the default box model of "content-box".

.inv_1 {
    width: 50%;
    height: 32px;
    box-sizing: border-box;
}

<input type="number" class="inv_1"/>

With content-box, padding, borders, and height/width (content) are calculated additively.

With border-box, padding and borders are included in height/width calculations.

score 0 · Answer 2 · answered Jan 13 '21 at 17:42

Its because of the default broder and padding. Use box-sizing: border-box; as in the snippert below. And input is an empty tag. It needs no closing slash.

input {
  display: inline;
}

.inv_1 {
  width: 30%;
  height: 32px;
}

.inv_2 {
  width: 30%;
  height: 32px;
  box-sizing: border-box;
}

<input type="number" class="inv_1">
<input type="number" class="inv_2">

Set actual height for input

2 Answers2