css - Textarea 和 input 有不同的宽度

Question

CSS:

textarea, input {
  width:300px;
}

HTML:

<textarea id="input"></textarea>
<br>
<input type="submit">

现场演示:http://codepen.io/qaz/pen/teaiG

为什么input和textarea显示的宽度不一样？我需要添加哪些属性才能使它们具有相同的宽度？

更新: 通过将 border 和 padding 设置为 0px，我可以使它们以相同的宽度显示。但是，没有人想要 padding:0px，而且奇怪的是，当两者的 padding 都为 10px 时，它们的宽度不再相同。现在我已经找到了 padding:0px 的解决方案，我仍然对解释和允许我仍然有 padding 的解决方案感兴趣。

(我在 Windows 7 上使用 Chrome 35。)

Answer 1

尝试这样设置:

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/QV9PE/

box-sizing CSS3 属性可以做到这一点。 border-box 值(相对于 content-box 默认值)使最终呈现的框成为声明的宽度，并且框内的任何边框和填充都被切割。

我们现在可以安全地将我们的文本区域声明为 300px 宽度，包括基于像素的填充和边框，并完美地完成布局。