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 share the same styles but their size is quite different.

Why does this happen?

Thanks!

Answer 1

This is because of the box model being used is different for the <input type="submit"> and the <input type="text">/<textarea>. You can make the box models the same by specifying them with CSS:

box-sizing: border-box;
-moz-box-sizing: border-box;

You can read more about box models here: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model

I edited your jsFiddle to show it working: jsFiddle demo