为什么这些元素的宽度不一样？

Question

在谷歌浏览器中（使用版本50测试），如果我将<input>元素和<textarea>元素的宽度设置为500px，则它们的宽度显然不同。我尝试明确删除任何填充，它们仍然显然不是相同的宽度。这在Mozilla Firefox中不会发生。 See here on jsfiddle

<input type="text"/>
<br/>
<textarea></textarea>

input, textarea {
  width: 500px;
}

Answer 1

文本输入元素的原生填充不同。

在 CSS ：

中添加此内容

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;  

Answer 2

它来自box-sizing，你可以为它们添加box-sizing: border-box;，它们将具有相同的宽度。

  

box-sizing属性用于告诉浏览器调整大小   属性（宽度和高度）应包括。 （CSS3 box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。） W3School

更新

评论中描述了@Herry：

  

在Chrome中，输入的所有边都有2px边框，1px顶部和底部填充   左边+右边没有填充，而textarea有1px边框+ 2px   四面填充。简而言之，输入有2px外部内容框区域   在左边和右边，而textarea有3px。所以有区别   2px。

请参阅demo