解决两个input设置了一样的高度，实际高度却不一样问题

今天在写页面的时候发现一个奇怪的地方，先看我的代码：
HTML代码：

<form>
    <input type="text" class="text">
    <input type="button" value="button" class="btn">
</form>

CSS代码：

input{ height: 50px; }

明明设置了一样的高度，实际高度却有出入，这个时候只要在文本框的css样式加上box-sizing: border-box ；就可以了；