去除文本周围的额外填充

Question

11

我有一个 div。我想在文本周围添加5像素的内边距，但是会有一些额外的间距，就好像我的浏览器在嘲笑我对此的徒劳尝试。

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的内边距，上下各8像素。

我想可能是一个line-height的问题 - 所以我将其设置为0。但是没有改变任何东西。尝试将其设置为负号。也不起作用；事实上，Chrome不想与此有任何关系，并给了我一个错误。

那么这个额外的东西在这里做什么？它有一个名字吗？我能缩小它吗？我想要确切地在这些字母周围有5px的空间，而不是将近三倍的13px。

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

- Ian Hunter

我知道这听起来有点疯狂，但是 - div的css - 上面是否有一个div？因为这个css也会应用于它... - Rob

2

感谢您提出这个写得非常好的问题。虽然它可能有点友好！ - Lightness Races in Orbit

你使用的是哪个浏览器（及版本）？ - Jason D

我正在使用Chrome 11，但结果发现文本输入框只是稍微拉伸了一点。很蠢，我知道。 - Ian Hunter

3个回答

0

也可以尝试从 <select> 元素中移除任何 margin：

select {
    margin: 0;
}

这也可能是由于不可见的文本节点。当您需要像素精度时，请尝试从HTML中删除所有空格：

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

- Jon

-1

尝试添加：

body{
    margin:0px !important;
    }

- LostLin

4

在这样做的过程中，是否会影响页面上的每个元素？ - Lightness Races in Orbit

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lightness Races in Orbit · Accepted Answer

表单元素可能会扩展其包含元素。很难确定，因为你没有在截图中包含它们的原因。

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