CSS: Submit button looks smaller than text input and textarea

Question

I just noticed this strange rendering of a very simple form.

Here\'s my markup/CSS: http://jsfiddle.net/a9PLM/

As you can see, text fields and the button sha

Answer 1

The problem is that the form parts are generally not rendered like normal HTML elements, and styling them is always a bit hit-or-miss. I would attempt to avoid a case like this that requires exact sizing, but if you can't, then split the selectors like this:

    form textarea, form input[type=text]
    {
        width:250px;
        padding:10px;
    }
    form input[type=submit] { width: 270px }

Note that I added 20 px (10 x 2) to the width to compensate for padding.