输入和textarea设置为相同宽度时显示不同的宽度？

Question

当我将输入和文本区域的宽度设置为94％时，它们的宽度似乎略有不同。这是我在很多网站上多次看到过的。

任何人都可以解释为什么当设置为相同的％宽度时，textarea不像输入那么宽？

input, textarea {
    width: 94%;
}

Answer 1

1. 不要忘记the box model包括边框，填充和边距。它们都会影响页面中元素的实际物理宽度。
2. 除非您使用CSS reset，否则您将受默认浏览器样式表的支配，这些样式表为每个元素设置了不同的边框，填充和边距。

Answer 2

使用CSS3，您还可以使用：

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