Question

I've been trying to make a form where the elements are all the same width after padding and margin are factored in. The elements I've used successfully are the <textarea>, <input type="text">, and <div> tags. I've been successful for the most part, but the <input type="submit"> element doesn't seem to use horizontal padding the same way any other element does. Am I missing something?

How can I get them all to be the same width without sacrificing my padding?

Example: http://jsfiddle.net/4kA8k/

For the sake of thoroughness, I'm using Chrome and have checked that this happens in IE as well.

Was it helpful?

Solution

I think the following lines in your CSS might do the trick so that all HTML-elements behave (kind of) equal:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top