Input text width?

Question

So I noticed that input texts boxes are slightly larger than everything else. For example, when setting a div to 200 px, and setting an input type="text" to 200 px, the input is always wider. Is there a way around this or am I stuck guessing the width? (which is about 197px but it's not perfect)
https://code.sololearn.com/Wfu2gi2sd1cq/?ref=app

Answer 1

Actually the problem isn't the input itself, it's the padding!
If any element has padding on it, the total width of the element will be width+padding. (Same goes for margin)

They implemented another sizing mechanism to change this behaviour to what you would expect:
box-sizing: border-box;

Give that to your input and it should work. I actually spam that line everywhere. The default (box-sizing: content-box) is just so bad.

Answer 2

input {
width:200px;
box-sizing: border-box;
}

Answer 3

what about 197.49 px?