Why does the button shift relative to the input field?

Question

css

I have the following code:

<form action="/ru/search/node/" method="get" id="searchform">
                        <input type="search" id="search" placeholder="Поиск..." />
                        <button type="submit" id="button">Искать</button>
                    </form>

and css

#search{
       height:60px;
   }
    #button{
        height: 60px;
        color: white;
        background-color: cornflowerblue;
    }

For some reason, the button moves to the bottom http://joxi.ru/krDjjBZSEj6on2
. How can I fix this?

Answer 1

Hover your mouse over the button, right click, select View Code, see the styles that are applied to it other than yours.

Answer 2

Not moving out https://jsfiddle.net/6ngj3a2r/

Answer 3

The button slides out because initially for inline elements, the alignment is on the baseline of the text. Therefore, the button and the input field need to be set to vertical alignment, for example,vertical-align: middle;