Je suis perplexe quant au comportement du CSS suivant, également illustré dans ce violon .
<style type="text/css">
p {
font-size: 14px;
}
.percentage {
line-height: 150%;
}
.em-and-a-half {
line-height: 1.5em;
}
.decimal {
line-height: 1.5;
}
.smaller {
font-size:50%;
}
.caption {
font-weight: bolder;
font-size: 80%;
}
</style>
<p class="caption">default line spacing</p>
<p>This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p>This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="caption">line-height: 150%</p>
<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="percentage">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="caption">line-height: 1.5em</p>
<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="em-and-a-half">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="caption">line-height: 1.5</p>
<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>
<p class="decimal">This tutorial provides a brief introduction to the
programming <span class="smaller">language</span> by using one of its picture-drawing
libraries. This tutorial provides a brief introduction to the programming language. This tutorial provides a brief introduction to the programming language.</p>Les deux premiers paragraphes ont un interlignage par défaut. Dans le deuxième paragraphe, un mot est plus petit. Mais cela n'affecte pas l'interlignage dans ce paragraphe. Non pas que cela devrait, mais
Les deux paragraphes suivants ont line-height: 150% . Encore une fois, le deuxième paragraphe a un mot qui est plus petit. Mais cette fois, pour des raisons peu claires, la police plus petite crée un espace supplémentaire entre les deux premières lignes (du moins dans Safari, Chrome, Firefox et Explorer). C'est le problème original dans mon CSS que j'essayais de corriger. (Je suppose que cela a quelque chose à voir avec le fait que le navigateur rétrécit le mot et le décale ensuite verticalement vers le bas pour réaligner les lignes de base).
Les deux paragraphes suivants ont line-height: 1.5em . Je crois savoir que 1.5em est la même chose que 150% . Et effectivement, le comportement est le même : espace supplémentaire entre les deux premières lignes du deuxième paragraphe.
Mais c'est là que ça devient bizarre les deux paragraphes suivants ont line-height: 1.5 - aucune unité n'est spécifiée. Cette fois, le problème de l'extra-espace disparaît.
En résumé, CSS semble donner des résultats cohérents en matière d'interlignage lorsque les hauteurs de ligne du parent et de l'enfant sont différentes (par héritage de la valeur sans unité), mais des résultats incohérents lorsque les hauteurs de ligne du parent et de l'enfant sont identiques.
D'où mes questions :
-
Je sais qu'il y a une différence sémantique intentionnelle. dans la spécification CSS entre
1.5y150%ou son synonyme,1.5em. (À savoir : une valeur sans unité est transmise à l'élément enfant et sa hauteur de ligne est calculée à l'aide de la taille de la police de l'enfant, alors qu'une valeur en pourcentage ou em entraîne le calcul d'une hauteur de ligne pour le parent, puis cette valeur calculée est transmise à l'enfant). Mais comment cela explique-t-il la différence de comportement observée ici ? D'où vient l'espace supplémentaire ? S'il s'agit d'une conséquence d'une règle de positionnement CSS, quelle est cette règle ? -
Ou, si ces exemples doivent tous s'afficher de la même manière, lequel est implémenté de manière incorrecte ? (Note sur Q2 : Le fait que la bizarrerie de l'affichage se produise de la même manière sur différents navigateurs suggère fortement qu'aucun d'entre eux n'est implémenté de manière incorrecte, ce qui vous ramène à la question (1)).
-
En termes pratiques, y a-t-il un inconvénient à passer à des mesures sans unité comme(Réponse : non)1.5paraline-height?
