input submit标签的高度和宽度与input text的差异

<input type="text"> 时设置input的高度和border，最后元素的高度和宽度包含了border的值。

<input type="submit">时同样设置了input的高度和border宽度值，但是最后input显示的高度值仅为input css代码设定的高度值。

如下所示：CSS中Input height设置为18px,border设置了1px，但是最后input显示高度为18px，与旁边的input  text高度没有对齐。

.rightarea .form .submit{width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}

根据www.w3school.com.cn的css说明：

解决这个问题，可以运用box sizing。
在submit样式表中加入：box-sizing:content-box,最后的代码如下：

1. .rightarea .form .submit{box-sizing: content-box;-moz-box-sizing: content-box;/* Firefox */-webkit-box-sizing: content-box;/* Safari */width:50px;height: 18px;margin-top: 7px;border:1px solid gray;}

复制代码

点击阅读更多内容！