Question

As you can see from this example, the input seems to “overflow” its parent div. I’d like to add padding to the input without making it overflow its parent.

I would like to know the best solution/workaround for every browser (including IE, Firefox, Chrome, etc).

Answer 1

You can see this answer, but if you don’t like it, you can use box-sizing CSS3 property like this:

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

Live jsFiddle example