form表单的边框问题

使用form表单，设置宽度时遇到困难

<form action="" class="form" >
                    <input class="text" type="text" value="自然堂亮点水立方"/>
                    <input class="sub" type="submit" value="搜索"/>
                </form>

header .form {width: 629px;height: 36px;border: 2px solid #C40000;border-right: none;margin-bottom: 6px;}
header .form .text{width: 494px;height: 36px;border:none;}
header .form .sub{width:131px;height: 36px;background-color:#C40000 ;color: #fff;border:none;}

为什么form的宽度不于下面两个的和，能解释一下吗？

---

这个样式为了避免兼容性问题才这样的。。
主要就是你的.form有每边2个像素的边框border: 2px solid #C40000;
而这个在不同浏览器下是不同的，有的是在里面，那样加起来 494+131+2*2=629正好填满，而在中间和外面那个，就会出来1~2个像素的差异，总之不会错位。

---

内联元素之间的换行符也会占据一定的空间吧