input和button在同一行，高度为什么不一样？

<div class="codes h-regsiter">
                            <input class="code" placeholder="验证码">
                            <button class="getMSG">获取短信验证码</button>
                        </div>

高度设置是一样的

.codes .code {
    display: inline-block;
    width: 50px;
    height: 35px;
    margin: 0 10px 0;
    background-color: blue;

}
.codes .getmsg {
    display: inline-block;
    width: 100px;
    height: 35px;
}

---

代码有几个问题

1. 类名是区分大小写的；

2. input、button不用写inline-block,本身可以当成inline-block处理；

3. 许多元素被浏览器解析时有默认的padding、border等，最好先处理，如本例的input。

---

加上vertical-align: top;