为啥填充在我的标签元素上不起作用？

Posted 2023-03-06

【中文标题】为啥填充在我的标签元素上不起作用？

【英文标题】：Why is the padding not working on my label elements?为什么填充在我的标签元素上不起作用？

【发布时间】：2011-11-02 09:02:44

【问题描述】：

我这里有一些标记：

<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 说填充在那里，但它没有做任何事情。尝试将 padding 设置为 50px，但仍然没有。

有什么想法吗？

【问题讨论】：

请展示实际的相关代码，不要让我们下次筛选源代码。

@minitech padding-top: 5px; ...你没有萤火虫或类似的东西吗？

我使用的是公用电脑。不。即使我这样做了——如果有人没有呢？

好的。但是jsfiddle.net 是一种更好的方式来展示代码 sn-ps 并在操作中显示它们。供将来参考。

【参考方案1】：

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

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

【讨论】：

我会让inline-block 受益于两者。

值得注意的是inline-block 并不适用于所有浏览器。 IE

@Alastair Pitts：label 是 html 中的内联元素，所以 IE6/7/8 都支持display: inline-block。 IE8 全面支持。

@Alastair Pitts：严格来说这不是真的； IE7 在默认情况下支持inline 的元素上的inline-block（例如label）并且IE8 确实支持-我认为它完全支持inline-block。无论如何，这更像是 inline-block 在 IE

我明白了。知道这很简单。谢谢！

【参考方案2】：

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

【参考方案3】：

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

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

【参考方案4】：

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

label 
    line-height: 3;

【讨论】：

那会添加填充？

【参考方案5】：

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

行高不适用于换行。它看起来很凌乱，而且它上面的换行也被隔开。 显示block 或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/