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

Question

J'ai quelques balises 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. J'ai essayé dans IE et Firefox, et cela ne fonctionne pas dans les deux cas. Firebug indique que le remplissage est présent, mais il ne fait rien du tout. J'ai essayé de fixer le remplissage à 50px, mais rien n'y fait.

Des idées ?

Answer 1

A label est un élément en ligne et n'est donc pas affecté par le remplissage en haut et en bas. Vous devez faire en sorte que l'élément label un élément au niveau du bloc pour que cela fonctionne :

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

Answer 2

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

• La hauteur de ligne ne fonctionne pas correctement avec les lignes enveloppées. Cela donne l'impression d'être désordonné et d'espacer la ligne enveloppée qui se trouve au-dessus.
• Afficher block o inline-block causer le label pour rendre en dessous de des choses comme une case à cocher placée avant elle.

La solution consiste à utiliser un :before o :after pseudo-sélecteur sur le label . Cela permet de préserver les inline mais ajoute toujours le padding/margin/height. 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/

Answer 3

Vos étiquettes par défaut sont display:inline et, en tant que tels, ne supportent pas la mise en place de rembourrage. Le site <div> les éléments qui les entourent démarrent des contextes de bloc qui donnent l'impression que votre <label> sont également des éléments de bloc.

Vous pouvez corriger cela en ajoutant display:block au CSS de l'étiquette.

Answer 4

Vous pouvez également utiliser l'option line-height propriété :

label {
    line-height: 3;
}

Answer 5

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