CSS 删除文本周围的额外填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5924551/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing extra padding around text
提问by Ian Hunter
I have a div. And I'm trying to pad around the text 5px — no more, no less — but there's some extra spacing being thrown in there, like my browser is laughing in my face at my futile attempts to get this to do what I want it to do.
我有一个div. 我试图在文本周围填充 5 像素 - 不多也不少 - 但是那里有一些额外的间距，就像我的浏览器在我的脸上嘲笑我徒劳的尝试让它做我想做的事做。
Here's the CSS I'm using:
这是我正在使用的 CSS：
div{
font-family:'Arial', sans-serif;
padding:5px;
font-size:14px;
}
And here's my HTML:
这是我的 HTML：
<div>
Sort By:
<select>
<option>Customer</option>
</select>
Search Customer:
<input type="text">
</div>
(No styling's going on for the inputand selectfields, by the way.)
（顺便说一下，input和select字段没有样式。）
And here's the output I'm getting in my browser window
这是我在浏览器窗口中得到的输出
(highlighted with Chrome's developer console to give you an idea of the extra spacing going on):
（用 Chrome 的开发者控制台突出显示，让您了解额外的间距）：
html output http://img715.imageshack.us/img715/2438/padding.png
html 输出 http://img715.imageshack.us/img715/2438/padding.png
Wait a second, what's going on there? I've got 5px of padding all around, and then this weird inner paddinggoing on. I measured it in an image editor, and that extra paddingor whatever I should be calling it is adding an additional 8px of padding, top and bottom.
等一下，那里发生了什么？我周围有 5px 的填充，然后这个奇怪的内部填充继续存在。我在图像编辑器中测量了它，额外的填充或我应该称之为的任何东西都添加了额外的 8px 填充，顶部和底部。
Thought it might be a line-heightproblem — so I set that to 0. Didn't change a thing. Tried setting it to a negative number. Didn't work, either; in fact, Chrome wanted nothing to do with that and gave me an error.
认为这可能是一个line-height问题 - 所以我将其设置为 0。没有改变任何事情。尝试将其设置为负数。也没有用；事实上，Chrome 不想与此有任何关系，并给了我一个错误。
So what's this extra stuff doing here? Does it have a name? Can I shrink it? I want exactly 5px of space around those letters, not a nearly-three-times-as-much 13px.
那么这些额外的东西在这里做什么呢？它有名字吗？我可以缩小吗？我想要这些字母周围正好有 5px 的空间，而不是接近 13px 的三倍。
I appreciate the help — thanks in advance.
感谢您的帮助 - 提前致谢。
采纳答案by Lightness Races in Orbit
The form elements may be expanding the containing element. It's hard to tell, since you didn't include them in your screenshot for some reason.
表单元素可以扩展包含元素。很难说，因为您出于某种原因没有将它们包含在屏幕截图中。
If you set overflow: hiddenon your div, you may see this behaviour stop. Of course, you probably don't want this; you may be better off trying to manually set the height of those form elements, and ensure that they have margin: 0set.
如果您设置overflow: hidden了div，您可能会看到这种行为停止。当然，你可能不想要这个；您最好尝试手动设置这些表单元素的高度，并确保它们已margin: 0设置。
回答by LostLin
Try adding:
尝试添加：
body{
margin:0px !important;
}
回答by Jon
Try also removing any marginfrom the <select>element:
还尝试margin从<select>元素中删除任何内容：
select {
margin: 0;
}
This could also be due to invisible text nodes. Try removing allwhitespace from your HTML when you want pixel precision:
这也可能是由于不可见的文本节点造成的。当您需要像素精度时，请尝试从 HTML 中删除所有空格：
<div>Sort By:<select>
<!-- in here whitespace won't matter -->
<option>Customer</option>
</select>Search Customer:<input type="text"></div>
