File this one under “Tips for a Rainy Day”.

As I was styling a pretty simple contact form, I began to wonder why my submit button was significantly shorter than the text inputs above it. All were set to width: 350px, and all had 5px of padding applied. I had also ensured that all borders and browser chrome had been wiped out.

A little peek at the ‘Metrics’ panel within the Webkit Inspector revealed that as I added padding to my button, the width was actually decreasing: something that is not true for text inputs.

So there you have it: an extra 10px width ensured that all form elements were of the same appearance. It’s just a shame that silly behaviours such as these are still prevalent within the field of web design!

Tags: web design development css tip