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

【问题标题】：Unwanted top padding inside div elementdiv元素内不需要的顶部填充
【发布时间】：2014-10-13 23:15:43
【问题描述】：

我有这样的 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 轮廓和 box-shadow 是不够的，因为我需要指定圆角。阴影舍入是相对于边框舍入而言的，它对我来说太大了，所以我需要用我自己的小边框半径使用 DIV-wrapper 制作这个外边框。

【问题讨论】：

您的标记和样式不相关。你能给我们看一些fiddle
您只是缺少父元素 (#search-box)...样式确实与其余部分相关（有点想象力:)）
给出的代码没有说明图中的问题。您应该在发布代码之前检查代码以确保它说明了问题。要么指定浏览器，要么指定观察它的浏览器......因为我没有一个呈现你所描绘的选择方式。

标签： html padding css

【解决方案1】：

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

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

DEMO.

【讨论】：

【解决方案2】：

您可以将字体大小更改为 100%，尽管它会更改您最初编码的字体大小，但它会在选择框之外对填充进行排序。

#search-box select { font-size:100%; }

http://jsfiddle.net/r2wpxvw2/

【讨论】：

【解决方案3】：

http://jsfiddle.net/sj1aL1o8/

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

【讨论】：