input and textarea appear different width when are set to same width?

Question

When I set the width of an input and a text area to 94% they appear to be slightly different in width. This is something I have seen many times on many sites.

Can anyone explain why a textarea is not as wide as an input when set to the same % width?

input, textarea {
    width: 94%;
}

Answer 1

1. Don't forget the box model includes borders, padding, and margins. They all affect the actual physical width of an element in the page.
2. Unless you use a CSS reset you're at the mercy of the default browser stylesheets which set different borders, padding, and margins for each element.

Answer 2

With CSS3 you can also use:

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