Html 为什么填充对我的标签元素不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7168658/
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
Why is the padding not working on my label elements?
提问by dqhendricks
I have some markup here:
我在这里有一些标记：
<label>Username:</label>
<div class="input small"><div class="left"></div><div class="right"></div><div class="center">
<input name="username" type="text" />
</div></div>
<label>Password:</label>
<div class="input small"><div class="left"></div><div class="right"></div><div class="center">
<input name="password" type="password" />
</div></div>
And CSS:
和 CSS：
label {
padding-top: 5px;
}
For some reason, the padding on my two label elements is not working. Tried in IE and Firefox, and it isn't working in either case. Firebug says the padding is there, but it just isn't doing anything. Tried setting the padding to 50px, and still nothing.
出于某种原因，我的两个标签元素上的填充不起作用。在 IE 和 Firefox 中尝试过，在任何一种情况下都不起作用。Firebug 说填充在那里，但它没有做任何事情。尝试将填充设置为 50px，但仍然没有。
Any ideas?
有任何想法吗？
回答by tw16
A labelis an inline element and so is not affected by top and bottom padding. You need to make the labela block level element for it to work:
Alabel是内联元素，因此不受顶部和底部填充的影响。您需要制作label一个块级元素才能使其工作：
label{
display: block; /* add this */
padding-top: 5px;
}
回答by dhaupin
Suggesting a better answer for these reasons:
出于以下原因建议更好的答案：
- Line height doesn't work right with wrapped lines. It looks messy and spaces the wrapped line above it too.
- Display
blockorinline-blockcause thelabelto render belowthings like a checkbox input placed before it.
- 线高不适用于包裹线。它看起来很凌乱，并且它上面的包裹线也隔开了。
- 显示
block或inline-block使label呈现在诸如放置在其前面的复选框输入之类的东西下方。
The solution is to use a :beforeor :afterpseudo selector on the label. This preserves the native inlinebehavior but still adds padding/margin/height. Example:
的解决方案是使用一个:before或:after所述伪选择器label。这保留了本机inline行为，但仍会添加填充/边距/高度。例子：
/* to add space before: */
label:before {
display: block;
content: " ";
padding-top: 5px;
}
/* to add space after: */
label:after {
display: block;
content: " ";
padding-bottom: 5px;
}
回答by dhaupin
Your labels by default are display:inlineand as such, don't support setting of padding. The <div>elements surrounding them start block contexts that make it appear as if your <label>s are also block elements.
默认情况下，您的标签display:inline不支持填充设置。<div>它们周围的元素开始块上下文，使其看起来好像您的<label>s 也是块元素。
You can fix this by adding display:blockto the CSS for the label.
您可以通过添加display:block到标签的 CSS来解决此问题。
回答by bryceadams
Alternatively, you could use the line-heightproperty:
或者，您可以使用该line-height属性：
label {
line-height: 3;
}
回答by Ry-
Inline elements aren't affected by padding-top. http://jsfiddle.net/pECCX/
内联元素不受padding-top. http://jsfiddle.net/pECCX/
