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

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