css 元素对齐的问题

1.问题描述：
在没有设置font-siz和font-family属性之前，两元素是对齐的，但设置之后出现了不对齐的问题。

如下图所示：
一开始是这样的：

1.html如下：

<div id="table1">
        <form>
            <input type="text" class="search" maxlength="32" size="108" />
            <input type="submit" class="button" value="百度一下" />
        </form>
    </div>

css如下：

    *{
        padding: 0px;
        margin: 0px;
    }
    .search{
        line-height: 32px;
    }
    .button{
        display: inline-block;
        height: 36px;
        width: 82px;
        background-color: #46A3FF;
        border-style: none;
        margin-left: -8px;
        font-size: 20px;
        font-family: 微软雅黑;
        padding: 0px;
                    }

刚开始学习，有点困惑，第一我对button设置了width和height属性，padding也是0px，不知道为什么会出现不对齐的情况？