描述问题

当 button标签 没有文字 时，与input标签 水平不对齐

代码

css：

<style>
    input{
        height: 30px;
    }
    button{
        width: 40px;
        height: 30px;
    }
</style>

html：

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

原因

input和button的 基线 是不同的，当button 没有文字时，所以会导致高低不同

解决

增加 垂直居中对齐方式的即可

<style>
    input{
        height: 30px;
        vertical-align:middle; /*垂直居中*/
    }
    button{
        width: 40px;
        height: 30px;
        vertical-align:middle;
    }
</style>