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显示高度为

<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,最后的代码如下：

.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;}

总结

以上是内存溢出为你收集整理的input submit标签的高度和宽度与input text的差异全部内容，希望文章能够帮你解决input submit标签的高度和宽度与input text的差异所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。