关于CSS中input输入框和Buuton按钮空格和对不齐问题的解决

问题分析：

当我们在HTML页面中使用输入框和按钮框放在一起时会发现其中有空隙，
而且对不齐的情况

造成空白的原因是因为input和button框是inline-block元素，俩者间存在隐藏的换行符；
对不齐的原因是因为input和button计算高度的方式不同

解决方法：

给父元素添加font-size属性，解决空白问题
给输入框和button添加vertical-align:middle;并将盒模型调整为border-box，就可以在俩标签
相同高度的情况下对齐且靠紧

    <style>
        *{
            box-sizing: border-box;
        }
        /* 容器 */
        .top-bar{
            font-size: 0;
        }
        input{
            height: 40px;
            vertical-align:middle;
            
        }
        button{
            height: 40px;
            vertical-align:middle;
        }
    </style>

效果如下：