Why is textarea different in width from input in Webkit browsers?

Question

css

For input and textarea in css, I set everything the same - paddings and margins, border, fonts, etc.
But still textarea cols='30' is wider than input size='30' in chrome, safari and opera. Everything is ok in firefox.
Why is this happening? Is there a way to fix this without changing the width?

Answer 1

www.prntscr.com/5v72of

Answer 2

Because textarea has padding. And by default, they are added to the specified size of the element. Add for textarea in css property box-sizing: border-box;
Here is another good link to check out: www.w3schools.com/css/css_boxmodel.asp

Answer 3

I never thought about this topic, but judging by the description -
htmlbook.ru/html/input/size
htmlbook.ru/html/textarea/cols
is the same.
I was more interested in this line -
The width of the text field, which is determined by the number of characters of the monospace font .
I tried to disable the monospace font in the textarea, but to no avail.

Answer 4

There is a solution to the problem on StackOverflow:
input, textarea{
font-family: Arial, sans-serif;
font-size: 100%
width: 26em; /* fallback for the next one, for browsers not recognizing ch */
width: 40ch; /* sets the width to 40 times the width of the digit “0” */
}
I don't know if this is a valid option, but it solved my problem.
link: stackoverflow.com/questions/18908018/why-do-textar...