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

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;