How to prevent padded child element to overflow its parent?

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