web-dev-qa-db-ja.com

ラベル要素でパディングが機能しないのはなぜですか？

ここにいくつかのマークアップがあります：

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

何らかの理由で、2つのラベル要素のパディングが機能しません。 IEとFirefoxで試してみました。どちらの場合も動作しません。Firebugはパディングはそこにありますが、何もしていません。パディングを50pxに設定して、何もない。

何か案は？

htmlcsspadding
32
dqhendricks

labelはインライン要素であるため、上下のパディングの影響を受けません。 labelを機能させるには、ブロックレベルの要素にする必要があります。

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

これらの理由からより良い答えを提案する：

  • 行の高さは、折り返された行では正しく機能しません。乱雑に見え、その上に折り返された行も配置します。
  • blockまたはinline-blockは、labelに、その前に置かれたチェックボックス入力のようなものbelowをレンダリングさせます。

解決策は、:beforeまたは:afterlabelの擬似セレクター。これにより、ネイティブのinline動作が保持されますが、依然としてpadding/margin/heightが追加されます。例：

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

3
dhaupin

デフォルトのラベルはdisplay:inlineであるため、パディングの設定はサポートされていません。それらを囲む<div>要素は、<label>sもブロック要素であるかのように見えるようにするブロックコンテキストを開始します。

これを修正するには、ラベルのCSSにdisplay:blockを追加します。

2
user48092

インライン要素はpadding-topの影響を受けません。 http://jsfiddle.net/pECCX/

1
Ry-

または、line-heightプロパティを使用することもできます。

label {
    line-height: 3;
}
1
bryceadams