css - 删除文本周围的额外填充

Question

我有一个 div。我试图在文本周围填充 5px——不多也不少——但是那里有一些额外的间距，就像我的浏览器在我的脸上 mock 我徒劳地试图让它做我想做的事做。

这是我正在使用的 CSS:

div{
    font-family:'Arial', sans-serif;
    padding:5px;
    font-size:14px;
}

这是我的 HTML:

<div>
    Sort By:
    <select>
        <option>Customer</option>
    </select>
    Search Customer:
    <input type="text">
</div>

(顺便说一句，input 和 select 字段没有样式。)

这是我在浏览器窗口中得到的输出

(用 Chrome 的开发者控制台突出显示，让您了解额外的间距):

html output http://img715.imageshack.us/img715/2438/padding.png

等一下，这是怎么回事？我周围有 5px 的填充，然后这个奇怪的内部填充还在继续。我在图像编辑器中对其进行了测量，那个额外的 padding 或任何我应该调用它的东西是在顶部和底部添加额外的 8px 的填充。

认为这可能是 line-height 问题 — 所以我将其设置为 0。没有改变任何东西。尝试将其设置为负数。也没有用；事实上，Chrome 与此无关并给了我一个错误。

那么这些额外的东西在这里做什么？它有名字吗？我可以缩小它吗？我想要这些字母周围正好有 5px 的空间，而不是 13px 的近三倍。

非常感谢您的帮助 - 提前致谢。

Answer 1

表单元素可能正在扩展包含元素。很难说，因为出于某种原因您没有将它们包含在屏幕截图中。

如果您在 div 上设置了 overflow: hidden，您可能会看到此行为停止。当然，您可能不想要这个；您最好尝试手动设置这些表单元素的高度，并确保它们设置了 margin: 0。