div元素内部不需要的顶部填充

Question

我有这样的HTML：

<div class="select-wrapper">
    <select name="type">
        <option value="test">test</option>
    </select>
</div>

和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;
}

然而，不知何故包装器顶部填充比底部填充更大：

当我在检查器中突出显示包装器时，它看起来像是：

如您所见，选择顶部边框和包装div内部内容的顶部之间有一些空格。

为什么会这样？如何强制顶部和底部间距相等？我需要包装元素来增加外边框。

CSS大纲和盒子阴影不够，因为我需要指定圆角。圆角四舍五入是相对于边界圆角而且对我来说太大了，所以我需要使用我自己的小边框半径来制作带有DIV包装的外边框。

Answer 1

select的高度小于.select-wrapper的内部高度。

将display: block和height: 100%添加到选择中，这样它就会占据其父级的全部高度和宽度。

DEMO

Answer 2

您可以将字体大小更改为100％，虽然它会改变您最初编码的字体大小，但它会对选择框外部的填充进行排序。

#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;
}