Question

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

＆＃13;

div {
  width:200px;
  height:35px;
  border:1px solid red;
}

input {
  width:200px;
  height:35px;
  border:1px solid blue;
}

#inp1 {
  opacity:.5;
 }

＆＃13;

<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>

＆＃13;

Answer 1

默认情况下，输入元素具有某些css属性，例如outline-width，padding等。尝试将它们全部设置为0px并再试一次：）

Answer 2

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

＆＃13;

div {
  width:200px;
  height:35px;
  border:1px solid red;
}

input {
  width:200px;
  height:35px;
  border:1px solid blue;
  padding: 0;
}

#inp1 {
  opacity:.5;
 }

＆＃13;

<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>

＆＃13;

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

2 个答案: