为什么即使宽度和高度相同，不同的元素最终也会有不同的尺寸？

Question

为什么有些元素比其他元素稍大或稍小？例如 div 设置为 width:200 和 height:35，与 width:196 和 height:29 的输入框高度相同。
示例：

div {
  width:200px;
  height:35px;
  border:1px solid red;
}

input {
  width:200px;
  height:35px;
  border:1px solid blue;
}

#inp1 {
  opacity:.5;
 }

<h3>Both set to width:200px and height:35px</h3>
<div>DIV</div>
<input placeholder='Input'>
<br>
<h3>Overlapping comparison</h3>
<div>
  <input id='inp1'>
</div>

Answer 1

输入具有默认值 padding。将 padding 设置为 0，您会看到 div 和 input 将以相同的尺寸呈现！

div {
  width:200px;
  height:35px;
  border:1px solid red;
}

input {
  width:200px;
  height:35px;
  border:1px solid blue;
  padding: 0;
}

#inp1 {
  opacity:.5;
 }

<h3>Both set to width:200px and height:35px</h3>
<div>DIV</div>
<input placeholder='Input'>
<br>
<h3>Overlapping comparison</h3>
<div>
  <input id='inp1'>
</div>

Answer 2

默认情况下，输入元素具有某些 css 属性，例如轮廓宽度、填充等。尝试将它们全部设置为 0px，然后再试一次:)

为什么即使宽度和高度相同，不同的元素最终也会有不同的尺寸？

Why do different elements end up different sizes, even with the same width & height?

html

css

size

input