web-dev-qa-db-fra.com

Réglage de la hauteur de la ligne des éléments d'étiquette en formulaires HTML

J'ai une forme avec un élément <label> _ _ élément, mais l'espace entre les deux lignes <label> S est trop gros et que je n'arrive pas à ajuster la hauteur de la ligne de la ligne <label>.

Voici un exemple d'un <label> et a <p>, tous deux avec le même CSS appliqué. Comme vous pouvez le constater, le <p> _ s'ajuste correctement, tandis que le <label> reste inchangé.

http://jsfiddle.net/qyzpa/

Code: 

form label,
form p
{    
  font-weight:bold;
  line-height:.7em;
}
<form style="width:200px;">
    <fieldset>
         <label for="textarea">In ten or fewer words, explain American history</label>
        <p>In ten or fewer words, explain American history</p>
        <textarea name="textarea" rows="5" ></textarea>
    </fieldset>
</form>
htmllabelformscss
18
Yarin

Toutes les balises HTML sont classées dans des catégories qui décrivent leur nature. Cette classification peut être liée à la sémantique, au comportement, à l'interaction et à de nombreux autres aspects.

p et label balises sont classées dans la catégorie "Contenu de flux". Mais il y a une légère différence entre alors: la balise label est également classée dans une catégorie appelée "content de phrase".

Qu'est-ce que tout cela signifie dans la pratique? Le rendu par défaut du navigateur suivra les classifications de balise spécifiées et traitera la balise p comme élément de bloc, tandis que la balise label sera, par défaut, être traitée comme un élément en ligne. Vous pouvez modifier cela en écrasant la règle CSS par défaut: Dites simplement au navigateur que vous souhaitez que votre label soit rendu comme un élément de bloc.

label {
  display: block;
}

Vous devez faire cela parce que des éléments en ligne (affichage: inline) ne peuvent pas avoir de propriétés comme height, line-height, margin-top, margin-bottom (ils seront ignorés).

Si vous voulez qu'un élément en ligne ait une propriété en hauteur mais que vous gardez toujours avec son comportement en ligne (sans causer une pause de ligne), vous pouvez le déclarer comme suit:

label{
 display:inline-block;
}

Il est toujours bon de lire la documentation de HTML. Voici un graphique agréable montrant les catégories , il peut vous faire gagner beaucoup de temps, spécialement lors de votre traitement de ces petites bizarreries.

42
marcio

Je pense que ce que Marcio essaie de dire, c'est que dans inline éléments (comme spans ou labels), qui peut réexécuter l'une après l'autre dans le texte, vous ne pouvez pas spécifier attributs qui s'appliquent à l'ensemble du paragraphe.

L'évident est text-align: le paragraphe doit spécifier l'alignement et non l'individu spans. Donc, comme line-height et autres choses de ce genre.

L'opposé des éléments inline sont les éléments block éléments tels que div ou p qui occupe un carré sur une page et sont aménagés entre eux sur un niveau de bloc supérieur. Ce comportement est contrôlé avec l'attribut CSS display avec lequel peut faire div se comporter comme span et inversement.

3
Gman

Pas tout à fait sûr pourquoi, mais cela fonctionnera si vous définissez display: block; Sur l'étiquette

1
Fredrik