如何设置输入[类型= "text"]宽度和高度，使其对应于块元素的标准宽度和高度？

Question

出于某种原因，如果我将宽度和高度设置为文本输入元素，它会从具有相同宽度和高度的所有其他块元素中获得更大的大小

输入元素的宽度和高度值的公式是什么，这样它的大小就与宽度为x、高度为y的div完全相同？

请参阅此处的示例：https://codepen.io/alanklm/pen/MWpRgEe

html:

<input type="text" placeholder="a">
<button>a</button>
<div>a</div>

css：

*
{
margin-top: 10px;
display: block;
font-size: 16px;
text-align: center;
border: 0;

width: 100px;
height: 50px;
}
input
{
background-color: coral;
}
button
{
background-color: lightblue;
}
div
{
background-color: lightgreen;
}

p.s.我尝试将输入放入div，并调整div的大小，同时为输入容器提供100%的宽度和100%的高度——这导致了完全相同的结果，输入越过了div的边界。

Answer 1

这是因为文本输入上的默认padding: 1px 2px。仅设置padding: 0px

*
{
margin-top: 10px;
font-size: 16px;
text-align: center;
border: 0;

padding: 0px;

width: 100px;
height: 50px;
}
input
{
background-color: coral;
}
button
{
background-color: lightblue;
}
div
{
background-color: lightgreen;
}

<input type="text" placeholder="a">
<button>a</button>
<div>a</div>