删除文本周围的额外填充

Question

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

这是我正在使用的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的填充，然后这个奇怪的内部填充继续。我在图像编辑器中进行了测量，并且额外的填充或者我应该称之为的是添加额外的8px填充，顶部和底部。

认为它可能是line-height问题 - 所以我将其设置为0.没有改变一件事。尝试将其设置为负数。也没用;实际上，Chrome与此无关，并且给了我一个错误。

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

我很感激帮助 - 提前谢谢。

Answer 1

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

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

Answer 2

请尝试从margin元素中删除任何<select>：

select {
    margin: 0;
}

这也可能是由于隐形文本节点造成的。如果您想要像素精度，请尝试从HTML中删除所有空格：

<div>Sort By:<select>
    <!-- in here whitespace won't matter -->
    <option>Customer</option>
</select>Search Customer:<input type="text"></div>

Answer 3

尝试添加：

body{
    margin:0px !important;
    }