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

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

当我在检查器中突出显示 wrapper 时，它看起来像这样:

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

它为什么在那里？如何强制顶部和底部间距相等？我需要用于附加外边框的包装元素。

CSS outline 和 box-shadow 是不够的，因为我需要指定圆 Angular 。阴影圆 Angular 与边框圆 Angular 相关，它对我来说太大了，所以我需要用我自己的小边框半径用 DIV-wrapper 制作这个外边框。

Answer 1

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

将 display: block 和 height: 100% 添加到 select 中，这样它将占据其父项的完整高度和宽度。

DEMO .