输入和提交的宽度

Question

我有一个表单，我希望提交的宽度与其余输入的宽度相同。但提交似乎更小。我在这里简化了案例。我使用Firebug或Chrome检查器，它表示未提交的输入有4个像素。任何人都可以解释为什么，4px来自哪里？

我在这里简化了示例：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

这是因为<input type="text">元素的边框增加了宽度。
但是提交按钮没有边框。检查this 上面的示例删除了边框。

Answer 2

另一种方法是将边框和填充计算到 width / height：

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

fiddle demo