调整 HTML 表单中标签元素的行高
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6246119/
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
Adjusting line-height of label elements in HTML forms
提问by Yarin
I have a form with a wrapping <label>element, but the space between the <label>'s two lines is too big and I can't seem to adjust the line-height of the <label>.
我有一个带有环绕<label>元素的表单，但是<label>的两行之间的空间太大，我似乎无法调整<label>.
Here is an example of a <label>and a <p>, both with the same CSS applied. As you can see, the <p>adjusts correctly, while the <label>remains unchanged.
这是 a<label>和 a的示例<p>，两者都应用了相同的 CSS。如您所见，<p>调整正确，而<label>保持不变。
CODE:
代码：
form label,
form p
{
font-weight:bold;
line-height:.7em;
}<form style="width:200px;">
<fieldset>
<label for="textarea">In ten or fewer words, explain American history</label>
<p>In ten or fewer words, explain American history</p>
<textarea name="textarea" rows="5" ></textarea>
</fieldset>
</form>回答by marcio
All the HTML tags are classified in categories that describe their nature. This classification can be related to semantics, behavior, interaction and many other aspects.
所有 HTML 标签都按类别分类，描述了它们的性质。这种分类可以涉及语义、行为、交互和许多其他方面。
Both pand labeltags are classified in "flow content" tags category. But there is one slight difference between then: the labeltag is also classified in a category called "phrasing content".
这两个p和label标签归类于“流内容”标签类别。但两者之间有一个细微的区别：label标签也被归入一个称为“词组内容”的类别中。
What do all this mean in practice? The browser default rendering will follow the specified tag classifications and will treat the ptag as a block element, while the labeltag will, by default, be treated as an in-line element. You can modify this by overwriting the default CSS rule: just tell the browser that you want your labelto be rendered like a block element.
这一切在实践中意味着什么？浏览器默认呈现将遵循指定的标签分类，并将p标签视为块元素，而label标签将默认视为行内元素。您可以通过覆盖默认的 CSS 规则来修改它：只需告诉浏览器您希望您label像块元素一样呈现。
label {
display: block;
}
You need to do that because elements that are in-line (display:inline) can't have properties like height, line-height, margin-top, margin-bottom(they will be ignored).
您需要这样做，因为内嵌 (display:inline) 元素不能具有height, line-height, margin-top,等属性margin-bottom（它们将被忽略）。
If you want an inline element to have a height property but still keep it with it's inline behavior (without cause a LINE BREAK), you can declare it as:
如果您希望内联元素具有高度属性但仍保持其内联行为（不会导致换行），您可以将其声明为：
label{
display:inline-block;
}
It's always good to take a read at HTML 's documentation. Here is a nice graph showing the categories, it can save you a lot of time, specially when dealing with these small quirks.
阅读 HTML 的文档总是好的。这是一个很好的显示类别的图表，它可以为您节省大量时间，特别是在处理这些小怪癖时。
回答by Gman
I think what's Marcio is trying to say is that in inlineelements (like spans or labels), which can reside one after another in the text, you can't specify attributes that apply to the whole paragraph.
我认为 Marcio 想说的是，在inline元素（如spans 或labels）中，可以一个接一个地驻留在文本中，您不能指定适用于整个段落的属性。
The obvious one is text-align: the paragraph should specify the align and not the individual spans. So as line-heightand such.
显而易见的一个是text-align：段落应该指定对齐而不是单个spans。如此line-height如此。
The opposite to the inlineelements are the blockelements like divor pwhich occupy a square on a page and are laid out between each other on a higher block-level. This behavior is controlled with the CSS attribute displaywith which can make divbehave just like spanand vice versa.
与inline元素相反的是block像div或p这样的元素，它们在页面上占据一个正方形，并在更高的块级别上彼此布置。这种行为是由 CSS 属性控制的display，它可以使div行为就像span，反之亦然。
回答by Fredrik
Not entirely sure why, but it will work if you set display: block;on the label
不完全确定为什么，但如果你display: block;在标签上设置它会起作用
