input 便签高度不一致

Question

问题情景：在做一个类似于搜索条的工具，用了两个input框
问题： 两个框（一个type = 'text',另一个type = 'button'）的高度不一样
在没有设置任何有关高度的情况下：
代码为：

#create {
  margin-bottom: 1rem;
}
#create input {
  font-size: 1.4rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

图片为：

可以看出type=text类型的input实际是要比type=button矮一些的，为了保持高度一致，我又设置了height和line-height值：
代码为：

#create {
  margin-bottom: 1rem;
}
#create input {
  font-size: 1.4rem;
  padding-top: .6rem;
  padding-bottom: .6rem;
  height: 2.5rem;
  line-height: 2.5rem;
}

但结果如下：

不知道为什么会出现这种情况

Answer 1

默认样式未重置导致的问题，dev-tool里面可以看到相应的默认样式，可以查看并修改；
建议项目统一引入reset.css或者normalize.css 等重置所有基础样式，这样可以避免类似的问题

Answer 2

在你没重置样式前,<input type="button"/>的默认css box-sizing: border-box，影响到了

字体1.4rem 上下0.6rem的padding 2.5rem的高度 当然不够

可以使用box-sizing:content-box

Answer 3

避免这些问题，提供两种方案：1、每个input设置单独class，然后单独写需要的样式；2、按钮，最好是自己写个div标签，这样可以避免很多问题，提高研发进度。

Answer 4

type=button的话，情况是不一样的，需要你去单独的写样式