为什么填充不能在我的标签元素上工作？

Question

我在这里有一些标记：

<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>

和CSS：

label {
    padding-top: 5px;
}

由于某种原因，我的两个标签元素上的填充不起作用。在IE和Firefox中尝试过，在任何一种情况下它都无法正常工作。 Firebug说填充物在那里，但它没有做任何事情。尝试将填充设置为50px，但仍然没有。

有什么想法吗？

Answer 1

label是内联元素，因此不受顶部和底部填充的影响。您需要使label块级元素才能工作：

label{
    display: block; /* add this */
    padding-top: 5px;
}

Answer 2

出于以下原因建议更好的答案：

• 行高不适用于包裹线。它看起来很麻烦，也把它上面的包裹线隔开。
• 显示block或inline-block会导致label在下面呈现之类的内容，例如位于其前面的复选框输入。

解决方案是在: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;
}

https://jsfiddle.net/0gpguzwh/

Answer 3

默认情况下，您的标签为display:inline，因此不支持设置填充。围绕它们的<div>元素会启动块上下文，使其看起来好像您的<label>也是块元素。

您可以通过将display:block添加到标签的CSS来解决此问题。

Answer 4

或者，您可以使用line-height属性：

label {
    line-height: 3;
}

Answer 5

内联元素不受padding-top的影响。 http://jsfiddle.net/pECCX/