html - 当设置为相同宽度时，输入和文本区域出现不同的宽度？

Question

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

谁能解释为什么 textarea 在设置为相同的 % 宽度时不如输入那么宽？

input, textarea {
    width: 94%;
}

Answer 1

1. 不要忘记盒子模型包括边框、填充和边距。它们都会影响页面中元素的实际物理宽度。
2. 除非您使用CSS 重置，否则您将受制于为每个元素设置不同边框、填充和边距的默认浏览器样式表。

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+ */