为什么我的标签元素的填充不起作用？

Question

我这里有一些标记语言（markup）：

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>

还有CSS：

label {
    padding-top: 5px;
}

由于某种原因，我两个标签元素的填充(padding)不起作用。在IE和Firefox中都尝试过，但都没有起作用。Firebug显示填充(padding)存在，但实际上它什么也没做。已经尝试将填充(padding)设置为50像素，但仍然没有任何效果。

有什么想法吗？

- dqhendricks

---

下次请直接展示相关的实际代码，而不是让我们在源代码中搜索。 - Ry-

我正在使用一台公共计算机。不行。即使我这样做了 - 如果有人没有怎么办？ - Ry-

好的。但是http://jsfiddle.net/是一个更好的方式来展示代码片段并让它们在实际中运行。供以后参考。 - Ry-

Answer 1

label 是一个内联元素，因此不会受到顶部和底部填充的影响。您需要将 label 转换为块级元素才能使其起作用：

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

- tw16

---

我会将它设置为inline-block，以使两者兼顾。 - BeemerGuy

值得注意的是，inline-block 并不适用于所有浏览器。IE <= 8 不支持它。虽然有一些解决方法，但默认情况下可能无法正常工作。 - Alastair Pitts

@Alastair Pitts：label是HTML中的内联元素，因此IE6/7/8都支持在其上使用display：inline-block。IE8具有完全支持。 - BoltClock

@Alastair Pitts：那并不完全正确；IE7支持默认为“inline”的元素（如此“label”）上的inline-block，而IE8肯定支持-我认为它完全支持inline-block。无论如何，在IE <= 6上无法使用inline-block。 - Ry-

明白了，原来是一些简单的东西。谢谢你！ - dqhendricks

@Alastair Pitts，@minitech：实际上，至少五年前，支持display: inline-block最差的浏览器是Firefox，而不是IE；直到3.0版本，Firefox才完全支持它。 - BoltClock

Answer 2

基于以下原因，建议使用更好的答案：

• 当文本换行时，行高不起作用，看起来凌乱，且在其上方留有太多空白。
• display:block或display:inline-block会使label渲染在其他元素（如放在其前面的复选框）下方。

解决方法是在label上使用:before或:after伪类选择器。这样可以保留原生的 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/

- dhaupin

Answer 3

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

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

- user48092

Answer 4

另外，您可以使用line-height属性：

label {
    line-height: 3;
}

- bryceadams

---

那会添加填充吗？ - B. Clay Shannon-B. Crow Raven

Answer 5

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

- Ry-