Question

I have a form and I want the submit to be the same width than the rest of the inputs. But the submit seems smaller. I simplified the case here. I use the Firebug or the Chrome inspector and it says that the inputs that are not submit have 4 pixels more. Can anyone explain why, where do that 4px come from?

I have the example simplified here to play: http://jsfiddle.net/Mq5bq/

HTML:

<form id="form" action="admin_comprovar.php" method="post"><br />
  <input type="text" name="nom" value="name"/><br />
  <input type="text" name="mail" value="mail"/><br />    
  <input type="submit" value="submit">
</form>

CSS:

input { width:180px; padding: 0; }
input[type="submit"] { width:180px; }

Answer 1

Another way is to count borders and paddings into width/height:

input {
    width:180px;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

fiddle demo