Unwanted top padding inside div element - html

Question

I have such HTML:
<div class="select-wrapper">
<select name="type">
<option value="test">test</option>
</select>
</div>
And css:
#search-box .select-wrapper {
display: inline-block;
padding: 6px;
background: #eaeced;
}
#search-box select {
font-size: 11px;
margin: 0px;
padding: 0px;
padding-left: 8px;
border: 1px solid #a6a6a6;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-border-radius:2px;
}
However somehow wrappers top padding is bigger then bottom one:
When I highlight wrapper in inspector, it looks like that:
As you can see, there is some space between selects top border and top of the inner content of a wrapping div.
Why is it there ? How can I force both top and bottom spacing to be equal ? I need that wrapping element for additional outer border.
CSS outline and box-shadow isn't enough, because I need to specify corner rounding. Shadows rounding is relative to border rounding and its too big for me, so I need to make this outer border with DIV-wrapper with my own, small border-radius.

Answer 1

The height of the select is smaller than the inner height of .select-wrapper.
Add display: block and height: 100% to the select so it will take the full height and width of it's parent.
DEMO.

Answer 2

You could change the font size to 100%, although it changes the font size from what you originally coded, it does sort the padding outside of the select box.
#search-box select { font-size:100%; }
http://jsfiddle.net/r2wpxvw2/

Answer 3

http://jsfiddle.net/sj1aL1o8/
.select-wrapper {
display: inline-block;
padding: 6px;
background: #eaeced;
line-height: 16px;
}