Textarea and input have different widths

Question

CSS:

textarea, input {
  width:300px;
}

HTML:

<textarea id="input"></textarea>
<br>
<input type="submit">

Live Demo: http://codepen.io/qaz/pen/teaiG

Why do the input and textarea display with different widths? What properties do I need to add to make them the same width?

UPDATE: By setting border and padding to 0px, I can make them display at the same width. Nobody wants padding:0px, though, and, strangely, when the padding is, say, 10px for both, they aren't the same width anymore. Now that I've found a solution with padding:0px, I'm still interested in an explanation and a solution that allows me still to have padding.

(I'm using Chrome 35 on Windows 7.)

Answer 1

Try setting it like this:

textarea, input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

http://jsfiddle.net/QV9PE/

The box-sizing CSS3 property can do just this. The border-box value (as opposed to the content-box default) makes the final rendered box the declared width, and any border and padding cut inside the box.

We can now safely declare our textarea to be of 300px width, including pixel-based padding and border, and accomplish out layout perfectly.