当设置相同宽度时，输入框和文本域的宽度为何不同？

Question

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

有人能解释一下为什么当宽度设置为相同的％时，文本框的宽度不如输入框宽吗？

input, textarea {
    width: 94%;
}

- dibs

Answer 1

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

- John Conde

---

我会接受这个的，因为当我添加了padding:0和margin:0选项后，输入框和文本区域排列整齐了。谢谢！ - dibs

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

- Ricardo Marimon

---

我几天前学到了这个，它改变了我的整个世界！ - Peter