html - 输入和提交的宽度

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">元素有一个增加宽度的边框。
但是提交按钮没有边框。看看这个。
上面的示例删除了边框。

Answer 2

另一种方法是将边框和填充数计入宽度/高度：

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

小提琴演示