不需要的顶部填充在div元素中
不需要的顶部填充在div元素中
提问于 2014-08-20 14:29:37
我有这样的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包装来制作这个外部边界。
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-20 14:35:57
select的高度小于.select-wrapper的内部高度。
将display: block和height: 100%添加到select中，这样它将获得其父级的全部高度和宽度。
DEMO。
Stack Overflow用户
发布于 2014-08-20 14:36:47
您可以将字体大小更改为100%，尽管它更改了您最初编码的字体大小，但它确实会对复选框之外的填充进行排序。
#search-box select { font-size:100%; }http://jsfiddle.net/r2wpxvw2/
Stack Overflow用户
发布于 2014-08-20 14:37:41
http://jsfiddle.net/sj1aL1o8/
.select-wrapper {
display: inline-block;
padding: 6px;
background: #eaeced;
line-height: 16px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25407399
复制相关文章
相似问题
腾讯云开发者
