web-dev-qa-db-fra.com

Pourquoi ne puis-je pas diminuer la hauteur de ligne de ce texte?

http://jsfiddle.net/mJxn4/

C'est très étrange: j'ai quelques lignes de texte enveloppées dans un <em> tag. Peu importe ce que je fais, réduire la valeur de line-height en dessous de 17 pixels n'a aucun effet. Je peux heurter le line-height up à une valeur supérieure à 17 pixels et cela s'appliquera, mais je ne peux pas obtenir une valeur inférieure à 17 pixels.

Le CSS en question est:

#others .item em {
    font-size: 13px;
    line-height: 17px;
}

Essayez d'ajuster la hauteur de la ligne à la fois plus haut et plus bas et exécutez le violon mis à jour après chaque changement, et vous verrez ce que je veux dire.

Pourquoi serait-ce? Non line-height est spécifié ailleurs dans le CSS, donc rien ne le remplace. Cela ne pouvait pas être le cas de toute façon parce que j'ajuste le line-height vers le haut et vers le bas dans le même sélecteur , il n'est donc pas logique qu'une valeur plus élevée s'applique, mais une valeur plus basse soit remplacée.

cssem
44
daGUY

Parce que la balise em est en ligne et sa hauteur de ligne ne peut pas être inférieure à son parent div.

Par exemple, si vous définissez la hauteur de ligne du parent sur 10 pixels, vous pourrez également diminuer la hauteur de ligne de la balise em sur 10 pixels.

62
Ibu

Pour que la propriété line-height fonctionne, div doit avoir une propriété d'affichage égale à block

.app-button-label{
    line-height: 20px;
    display: block;
 }
14
Ramesh Vishnoi

J'étais confronté à ce problème avec les divs en vue mobile - la hauteur de ligne était trop grande et la hauteur de ligne ne fonctionnait pas! J'ai réussi à le faire fonctionner en ajoutant "display: block", selon les conseils ici: Pourquoi la propriété CSS 'line-height' ne me permet-elle pas de faire des espaces de ligne serrés dans Chrome?

J'espère que cela aidera toute autre personne confrontée au même problème à l'avenir

11
Grace

La meilleure façon de le faire est d'utiliser la réinitialisation css.

Écrivez le vôtre ou utilisez un modèle populaire comme

http://meyerweb.com/eric/tools/css/reset/

0
user1607528

Vous semblez utiliser normalized css option dans jsfiddle - qui équivaut à la réinitialisation des règles CSS - ala http://meyerweb.com/eric/tools/ css/reset /

Vous pouvez soit réinitialiser la réinitialisation, soit utiliser une réinitialisation différente si vous en avez vraiment besoin.

Voir ici pour plus de détails:

http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/

0
jrd1