不同类型input尺寸设置区别

最近发现为不用类型的input设置相同的尺寸，却得到了不一样的尺寸结果。发现不同类型的input的height和width竟然含义不同。在此小整理一下。

(1)button类型

规律

button类型的input的高度height包含了padding和border。

在Chrome下，paddding自动为1px，border自动为2px。

举例

如果我将其height设置为30px，则得到的其内容高度实际仅为24px。

（2）text类型

规律

text类型的input的高度height仅只内容部分，其会自动补上padding和border。

在Chrome下paddding自动为1px，border自动为2px。

举例

如果我将其height设置为30ox，则input框总高度为36px。

补充：盒模型基本知识回顾

• DOM盒模型的width和height仅指元素内容宽度、高度，不包含padding和border;
• IE盒模型的width和height包含内容、padding、border；
• 由此可见，button类型的input实际上是一个IE和模型，而text类型的input是符合DOM盒模型标准。