如何设置 input[type="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>

如何设置 input[type="text"] 宽度和高度使其对应于块元素的标准宽度和高度？

How to set input[type="text"] width and height so it corresponds to standard width and height of block elements?

html

css

size

input