web-dev-qa-db-fra.com

Pourquoi le rembourrage ne fonctionne-t-il pas sur mes éléments d'étiquette?

J'ai un balisage ici:

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

Et CSS:

label {
    padding-top: 5px;
}

Pour une raison quelconque, le remplissage de mes deux éléments d'étiquette ne fonctionne pas. Testé dans IE et Firefox, et cela ne fonctionne pas dans les deux cas. Firebug dit que le remplissage est là, mais il ne fait rien. J'ai essayé de définir le remplissage à 50 px, et toujours rien.

Des idées?

htmlcsspadding
32
dqhendricks

Un label est un élément en ligne et n'est donc pas affecté par le remplissage supérieur et inférieur. Vous devez faire du label un élément de niveau bloc pour qu'il fonctionne:

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

Suggérer une meilleure réponse pour ces raisons:

  • La hauteur de ligne ne fonctionne pas correctement avec des lignes enveloppées. Il semble désordonné et espace également la ligne enveloppée au-dessus.
  • Affichez block ou inline-block fait que label restitue en dessous des choses comme une entrée de case à cocher placée avant.

La solution consiste à utiliser un :before ou :after pseudo sélecteur sur le label. Cela préserve le comportement natif inline mais ajoute toujours le remplissage/marge/hauteur. Exemple:

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

Vos libellés par défaut sont display:inline et en tant que tel, ne prend pas en charge le réglage du remplissage. Le <div> les éléments qui les entourent démarrent des contextes de bloc qui donnent l'impression que votre <label>s sont également des éléments de bloc.

Vous pouvez résoudre ce problème en ajoutant display:block au CSS de l'étiquette.

2
user48092

Les éléments en ligne ne sont pas affectés par padding-top. http://jsfiddle.net/pECCX/

1
Ry-

Vous pouvez également utiliser le line-height propriété:

label {
    line-height: 3;
}
1
bryceadams