Comment obtenir une bonne consistance hauteur de ligne CSS

Ma règle CSS de base pour font-size et line-height est assez simple:Comment obtenir une bonne consistance hauteur de ligne CSS

body { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    line-height: 24px; 
}

Lorsque je crée un paragraphe qui contient un <em> ou un <strong> (ou même certains <code> qui utilise un différent font-size que le <body>), je remarque que ces éléments augmentent la hauteur de ligne d'un pixel ou deux. Cela me porte à croire que la plupart des navigateurs prennent l'élément en ligne le plus grand pour afficher line-height. Est-ce correct?

Mon objectif est de rendre cohérent le line-height, quels que soient les éléments en ligne.

La seule façon que j'ai trouvé pour rendre la line-height cohérente est de définir:

em, strong, code, etc { 
    line-height: 100%; 
}

Est-ce la bonne façon de faire à ce sujet? Ou suis-je trop perfectionniste?

Edit 1:

Cela semble aussi travailler:

em, strong, code, etc { 
    line-height: 1; 
}

Edit 2:

Après avoir joué avec cela pendant quelques jours, il ne semble pas que il existe une solution fiable pour maintenir un line-height cohérent. Si quelqu'un a des idées, j'aimerais beaucoup les entendre.

Edit 3:

Pour ma référence future et de mes propres recherches, ces balises doivent être considérés avec line-height: 1 aussi longtemps qu'ils sont affichés en ligne ainsi que d'autres corps du texte standard:

abbr, acronym, b, big, cite, code, del, dfn, em, i, ins, kbd, q, 
samp, small, strong, sub, sup, tt, var

Ces éléments sont discutables:

a, bdo, img, span

Source

2009-10-12 Jeff

Le spec confirme ce que vous pensiez, que les navigateurs prennent la plus grande police pour le calcul de la hauteur ligne. Cela signifie que votre seule option (et celle mentionnée dans les spécifications) est de définir la hauteur de la ligne pour TOUTES les cases en ligne sur les lignes qui vous intéressent.Vous ne seriez probablement pas satisfait des résultats de la sélection de body * et de la définition de la taille de la police. Alors ajoutez quelques Divs avec la même classe autour de ce que les blocs de texte que vous voulez regarder uniforme, et là vous allez:

div.uniformlines * { 
    line-height: 100%; 
    font-size: 16px; 
}

Source

2009-10-13 17:26:03 WillfulWizard

Grande info! Qu'en est-il de 'p * {line-height: 0; } ', ou mieux encore peut-être' p un, p code, p grand {line-height: 0; } '? Maintenant nous allons quelque part. ';)' – Jeff

Suivi de mon dernier commentaire. Faites attention avec mon code ci-dessus. Si vous avez, par exemple, '

foo

', la hauteur de ligne sera calculée à zéro, ce qui n'est probablement pas ce que vous voulez. – Jeff

Je pense que ce joli n mange l'idée Cependant, n'oubliez pas que si le texte en gras/italique est trop grand, vous risquez d'altérer la lisibilité en rendant toutes les lignes vraiment hautes quand il n'y en a qu'une. Vous pouvez également vouloir quelque chose à traiter avec exposant et indice, si votre exemple ne prend pas déjà en charge.

Source

2009-10-12 15:58:17 DisgruntledGoat

Ooooo ouais, travaillant sur sub et sup maintenant, mais sur le point d'abandonner. Lol – Jeff

Hmm, je viens de revenir à cela et je ne pense pas que ce que j'ai posté est juste. Définir la hauteur de ligne à 100% ne la maintient pas cohérente - la ligne avec le texte le plus grand est plus grande, mais les lignes suivantes reviennent à la normale. Votre exemple de définition de la hauteur de la ligne à 0 garde toutes les lignes à leur hauteur d'origine - dans ce cas, vous devez vous assurer que le texte plus grand ne chevauche pas les autres lignes. – DisgruntledGoat

Je ne vois pas ce comportement, mais j'utilise WebKit. Est-ce que le problème se produit pour vous si vous jetez des tags gras dans cet exemple?

http://www.w3schools.com/css/tryit.asp?filename=trycss_line-height

Source

2009-10-13 10:16:52

Oui, c'est sûr (FF 3.0.x). Je travaille sur ce problème maintenant et il ne semble pas y avoir de solution amiable. – Jeff

Il semble le mieux et le plus flexible pour définir body {line-height: 0} puis définir la hauteur de ligne pour les principales zones de contenu avec line-height: 1 ou 1,5 ou autre. Cela vous permet de contrôler les autres éléments de manière plus dynamique et cohérente. Par exemple, la hauteur de ligne peut être très problématique pour les images ou autres grilles qui veulent être alignées les unes par rapport aux autres, comme un style de galerie. C'est le plus souvent le cas lorsque les images ont des balises d'ancrage qui héritent de la hauteur de ligne de leur parent. La spécification permet une valeur "normale", mais cela semble être une norme différente par navigateur. 1 ou 100% sont également des options, mais "0" semble fondamentalement obliger tous les navigateurs à forcer le même standard, comme une bonne réinitialisation CSS. Bien sûr, tout le texte est écrasé sur une ligne avec "0", c'est pourquoi la définition de la hauteur de ligne dans les zones de contenu est nécessaire.

Here's a codepen I put together to illustrate the point

Source

2014-07-18 18:25:54

Ce fil est déjà ans et les choses auraient pu changer dans l'intervalle, mais ce qui suit (que je retrouvais sur http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/) fonctionne pour moi:

* { 
    vertical-align: bottom; }

Il est tout à fait surprenant puisque vertical-align en tant que tel semblerait sans rapport avec line-height; encore une fois, c'est CSS donc on ne sait jamais. Le site cité ci-dessus suggère en fait

sub { 
    height: 0; 
    line-height: 1; 
    vertical-align: baseline; 
    _vertical-align: bottom; 
    position: relative; }

qui ressemble à un hack pour moi.

Source

2015-01-21 05:12:07 flow

Comment obtenir une bonne consistance hauteur de ligne CSS

Répondre

Questions connexes