问题

input 和 button，设置相同的高度，但实际高度不一致

css：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    input{
        height: 30px;
    }
    button{
        height: 30px;
    }
</style>

html：

<input type="text">
<button>按钮</button>

原因

在高度计算上始终使用了Quirks（怪癖）模式。在Quirks模式下，边框的计算是在元素的高度、宽度内

使用Standards（标准）模式，高度、宽度不包含边框高度

增加下面样式：

input,button{
    box-sizing: border-box;
}

指定 input 和 button 使用 怪异盒模型，即：padding 和 border 包含在指定的 width 和 height 之内。

提示：表单控件设置该样式，便于指定高度

这样 input输入框、button按钮的高度就一致了

关于 box-sizing 详见链接

关于 Quirks(怪癖）模式详见链接