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

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

A label是内联元素,因此不受顶部和底部填充的影响.您需要使label块级元素工作:

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

Answer 2

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

• 行高不适用于换行。它看起来很乱，而且上面的包裹线也被隔开。
• 显示block或inline-block导致在其下方label呈现诸如放置在其前面的复选框输入之类的内容。

解决方案是在 上使用:before或伪选择器。这保留了本机行为，但仍然添加了填充/边距/高度。例子：:afterlabelinline

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