Unwanted top padding inside div element

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.