How to equal height of <select> and <button> element with padding - html

Question

I want to make both elements 'select' and 'button' have the same height.
JS Fiddle
HTML
<select><option>...</option></select><button>Button</button>
CSS
* {
font-size:100%;
}
select, button {
border:1px solid gray;
padding:.4em .6em;
margin:0;
//box-sizing:border-box; (did not help...)
}
JS Fiddle
Right now it looks like this:
But it should look like this:
How can I achieve the desired outcome with changing the CSS?

Answer 1

Add some bigger padding for button:
button{
padding: 1px;
}
Just make sure in all browsers elements are shown equal. Form elements tends to be Browser specific, so they may wary. Better put dropdown above fake drowpdown image and make it with opacity = 0, in that way you will get dropdown appearance same in all browsers.

Answer 2

Give padding differently.. May be like this
select, button {
border:1px solid gray;
margin:0;
}
select {
padding:.35em .6em;
}
button {
padding:.4em .6em;
}

Answer 3

Define height as like this
select, button {
border:1px solid gray;
padding:.4em .6em;
margin:0;
height:40px; // add this line
}
Demo

Answer 4

select, button {
border:1px solid gray;
margin:0;
padding:0 .6em; //updated
height:2.3em; //new
box-sizing:border-box; //new
}

Answer 5

* {
font-size: 100%;
box-sizing: border-box;
}
button::-moz-focus-inner {
border:0;
padding:0;
}
select, button {
border: 1px solid gray;
padding: 5px;
margin: 0;
}
button {
padding: 6px;
}