删除文本周围的额外填充

Question

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

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

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

(顺便说一句,没有样式input和select田地的样式.)

(使用Chrome的开发者控制台突出显示,可以了解正在进行的额外间距):

等一下,那里发生了什么？我周围有5px的填充,然后这个奇怪的内部填充继续.我在一个图像编辑器中测量它,额外的填充或任何我应该称之为添加额外的8px填充,顶部和底部.

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

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

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

Answer 1

表单元素可以是扩展包含元素.很难说,因为出于某种原因你没有在屏幕截图中包含它们.

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