css - HTML submit button's size is smaller than 100%? -

i have little problem html form , submit button:

<form action="login/login.php" method="post" style="margin-top: 10px;">       <input id="login" name="username" type="text" placeholder="nutzername" />       <input id="login" type="password" name="passwort" placeholder="passwort" />       <input id="login" type="submit" value="anmelden" /> </form> 

css:

input[type=text]#login, input[type=password]#login { border: 1px solid #ccc; display: block; height: 20px; text-align: center; width: 100%; }  input[type=submit]#login { display: block; height: 20px; text-align: center; width: 100%; 

}

result: http://jsfiddle.net/jmtt3/72/

as can see, button slighty smaller text boxes.. doing wrong?

the default setting width apply content box (excluding padding , border). padding different, outer width different.

you want add:

-moz-box-sizing: border-box; box-sizing: border-box; 

to @ least both of them.

alternatively, can set same padding , border achieve same effect.

edit: working fiddle