Comment obtenir un CSS line-height cohérence

Ma base de règle CSS pour font-size et line-height est assez simple:

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

Quand je crée un paragraphe qui contient un <em> ou un <strong> (ou même certains <code> qui utilise un autre font-size que le <body>), je remarque que ces éléments augmentent la hauteur de la ligne par un pixel ou deux.

Cela me mène à croire que la plupart des navigateurs prennent le plus grand élément inline pour afficher line-height. Est ce que le droit?

Mon objectif est de faire de la line-height les mêmes, peu importe quels sont les éléments inline.

Le seul moyen que j'ai trouvé pour faire de la line-height cohérente est de définir:

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

Est-ce la bonne façon d'aller à ce sujet? Ou suis-je trop perfectionniste?

Edit 1:

Cela semble également fonctionner:

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

Edit 2:

Après avoir joué avec pendant quelques jours, il ne semble pas qu'il y est une solution fiable pour garder une cohérence line-height. Si quelqu'un a des idées, je serais certainement ravis de les entendre.

Edit 3:

Pour mon propre avenir, de référence et de ma propre recherche, ces balises doivent être considérés avec line-height: 1 tant qu'ils sont affichés en ligne avec d'autres types de corps de texte:

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

OriginalL'auteur Jeff | 2009-10-12

css

5

La spec confirme ce que vous avez pensé, que les navigateurs qui participent le plus à la police de la hauteur de la ligne de calcul. Cela signifie que votre seule option (et celui de la spec mentions) consiste à définir la ligne de hauteur pour TOUS les inline boîtes sur les lignes qui vous intéressent. Vous avez probablement ne serait pas heureux avec les résultats de la sélection body * et le réglage de la taille de la police. Ajoutez donc quelques Divs avec la même classe en fonction de ce que les blocs de texte que vous souhaitez rechercher uniforme, et là vous allez:
```
div.uniformlines * { 
    line-height: 100%;
    font-size: 16px;
}
```
Super infos! Qu'en est p * { line-height: 0; }, ou mieux encore peut-être p a, p code, p big { line-height: 0; }? Maintenant que nous obtenons quelque part. ;)
Réponse à mon dernier commentaire. Soyez prudent avec mon code ci-dessus. Si vous avez, par exemple, <p><a href="#">foo</a></p>, la hauteur de la ligne permettra de calculer à zéro, ce qui n'est probablement pas ce que vous voulez.

OriginalL'auteur WillfulWizard
2

Il semble la meilleure et la plus souple pour définir body {line-height: 0} puis définir la ligne de hauteur pour les principaux éléments de contenu avec line-height: 1 ou 1,5 ou quoi que ce soit. Qui vous permet de contrôler les autres éléments de façon plus dynamique et cohérente.

Par exemple, la hauteur de la ligne peut être vraiment problématique pour les images ou d'autres grilles qui veulent être alignée avec les uns les autres, comme une galerie de style. C'est le plus souvent le cas lorsque les images ont d'ancrage des balises, qui héritent de la hauteur de la ligne de son parent. La norme permet une valeur "normale", mais qui semble être une norme différente par navigateur. 1 ou 100% sont également des options, mais "0", il semble, en fait, rendre tous les navigateurs vigueur à la même norme, comme un bon CSS reset. Bien sûr, tout texte est écrasé à une ligne avec "0", c'est pourquoi le réglage de la hauteur de la ligne dans les domaines de contenu est nécessaire.

Voici un codepen j'ai mis en place pour illustrer ce point

OriginalL'auteur Matt Cromwell
0

Je pense que c'est une assez bonne idée.

Cependant, n'oubliez pas que si le gras/italique le texte est trop grand, alors vous pourrait nuire à la lisibilité par la prise de toutes les lignes de vraiment grand, lorsque l'un doit être. Vous pouvez aussi vous voulez quelque chose à traiter en exposant et en indice, si votre exemple n'est pas déjà prendre soin d'elle.

Ooooo oui, le travail sur le sub et sup maintenant, mais sur le point de renoncer. Lol
Hmm, vient de revenir à cela et je ne pense pas que ce que j'ai posté est juste. Réglage de la hauteur de la ligne à 100% de ne pas le garder constant, la ligne avec le texte plus grand est plus grand, mais les lignes suivantes revenir à la normale. Votre exemple de réglage de la hauteur de la ligne à 0, toutes les lignes de leur hauteur d'origine - dans ce cas, vous devez vous assurer que le plus grand texte ne déborde pas sur les autres lignes.

OriginalL'auteur DisgruntledGoat
0

Je ne vois pas ce comportement, mais je suis en utilisant WebKit. Le problème survient-il pour vous si vous jeter un peu de gras balises dans cet exemple?

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

Yep, c'est sûr qu'il n' (FF 3.0.x). Je suis en train de travailler sur ce problème maintenant, et il ne semble pas comme il y a une solution à l'amiable.

OriginalL'auteur Azeem.Butt
0

Ce fil est déjà ans et les choses ont peut être changé dans l'intervalle, mais le suivant (que j'ai redécouvert sur http://webdesignandsuch.com/how-to-fix-sup-sub-line-height-problem-with-css/) fonctionne pour moi:
```
* {
  vertical-align: bottom; }
```
Il est assez surprenant puisque vertical-align en tant que tel semble sans rapport avec line-height; là encore, c'est le CSS de sorte que vous ne savez jamais. Le site web cité ci-dessus, en fait, suggère
```
sub {
  height: 0;
  line-height: 1;
  vertical-align: baseline;
  _vertical-align: bottom;
  position: relative; }
```
qui ressemble à un hack pour moi.

OriginalL'auteur flow

Vous devez vous connecter pour publier un commentaire.