How to fix input paddig in HTML5 - css

Question

I have a problem with padding in HTML5. I'm using this code:
input[type="password"] {
border: 1px solid #CECECE;
border-radius: 0 0 3px 3px;
padding: 7px;
font-size: 1em;
outline: none;
width: 100%;
margin: 0px;}
I use inputs in div, which has padding 10px.
And when I'm testing code the width of input is not right, look at this pic:
How to solve this problem? I want to have padding 10px in any window size.

Answer 1

Add this CSS :
input {
-moz-box-sizing:border-box;
-webkit-box-sizing: border-box;
box-sizing:border-box;
}
This property will include padding and border to the width/height of inputs so they won't overflow anymore.

Answer 2

Use:
box-sizing:border-box;
-moz-box-sizing:border-box;
in your css file.
input[type="password"] {
border: 1px solid #CECECE;
border-radius: 0 0 3px 3px;
padding: 7px;
font-size: 1em;
outline: none;
width: 100%;
margin: 0px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}

Answer 3

/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
http://fiddle.jshell.net/yTM9U/2/

Answer 4

You need to set the CSS style margin-right for the input.
input {
margin-right: 10px;
}
Padding is a cushioning/space inside the element. To push an element away from
surrounding elements internal cushioning/padding-space cannot help. Margin needs
to be set for those purposes...
But in your case, r/l to the form width, inputs are already very wide (100%). So, you need to decrease the width of the inputs. Try
input {
width: 90%;
max-width: 90%;
}