Pourquoi ne puis-je pas diminuer la hauteur de ligne de ce texte?
C'est très étrange: j'ai quelques lignes de texte enveloppées dans une balise <em>. Quoi que je fasse, abaisser la valeur de line-height en dessous de 17px n'a aucun effet. Je peux cogner le line-height up à plus de 17px et il s'appliquera, mais je ne peux pas l'obtenir inférieur à 17px.
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 signifier.
Pourquoi cela serait-il? Aucun line-height n'est spécifié ailleurs dans le CSS, donc rien ne le remplace. Cela ne pourrait pas être le cas de toute façon parce que j'ajuste le line-height haut et bas dans le même sélecteur , donc cela n'a pas de sens qu'une valeur plus élevée s'applique, mais une valeur plus basse serait remplacée.
6 réponses
Parce que la balise em est en ligne et que 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 10px, vous pourrez également réduire la hauteur de ligne de la balise em à 10px.
Pour que la propriété line-height fonctionne, div doit avoir la propriété display égale à block
.app-button-label{
line-height: 20px;
display: block;
}
J'étais confronté à ce problème avec divs dans la vue mobile-la hauteur de la ligne était trop grande et la hauteur de la ligne ne fonctionnait pas! J'ai réussi à le faire fonctionner en ajoutant "display: block", par conseil ici: Pourquoi la propriété CSS 'line-height' ne me permet-elle pas de créer des espaces de ligne serrés dans Chrome?
J'espère que cela aidera quelqu'un d'autre face au même problème à l'avenir
Vous semblez utiliser l'option normalized css dans jsfiddle - qui équivaut aux règles CSS en cours de réinitialisation - 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/
La meilleure façon de le faire est d'utiliser css reset.
Écrivez le vôtre ou utilisez le populaire comme
Le plus simple est de spécifier la hauteur de ligne avec une priorité plus élevée, par exemple vous pouvez écrire: line-height: 14px !important;
Si cela ne fonctionne toujours pas, définissez une priorité élevée dans les deux cas où vous souhaitez diminuer la hauteur de la ligne (CSS en ligne) et également mettre dans le corps CSS .. souvenez-vous de la haute priorité (!important;) car il remplace toutes les autres règles CSS inconnues.
J'espère que cela aide
Ahmed