web-dev-qa-db-fra.com

Définissez la hauteur de ligne en HTML <p> pour que le HTML ressemble à un Word de bureau lorsque <p> a des tailles de police différentes

Comment définir la hauteur de ligne dans UNE balise html <p>, lorsque ce <p> a deux tailles de police différentes?

Si je règle le <p style="line-height:120%"> .... </p>, alors le <p> entier n'aura qu'une hauteur de ligne.

Mais j'espère que cela se comportera comme le Microsoft Office Word/(et Google Doc). c'est-à-dire que différents contenus avec différentes tailles de police auront une hauteur de ligne différente.

Est-il possible pour <p> d'obtenir cet effet? Ou dois-je faire cela ligne par ligne, comme Google Doc? Y a-t-il un moyen plus facile?

htmlfontscss
6
sky609

En fait, vous pouvez y arriver assez facilement. Spécifiez simplement la hauteur de ligne sous forme de nombre:

<p style="line-height:1.5">
    <span style="font-size:12pt">The quick brown fox jumps over the lazy dog.</span><br />
    <span style="font-size:24pt">The quick brown fox jumps over the lazy dog.</span>
</p>

La différence entre nombre et pourcentage dans le contexte de la propriété CSS line-height réside dans le fait que la valeur numérique est héritée par les éléments descendants, mais la valeur en pourcentage est d'abord calculée pour l'élément actuel à l'aide de sa taille de police, puis cette valeur calculée est héritée. par les éléments descendants.

Pour plus d'informations sur la propriété line-height, qui est en réalité beaucoup plus complexe que ce à quoi elle ressemble à première vue, je vous recommande de consulter cette présentation en ligne .

10
Pavel Vladov

Vous pouvez définir le line-height en pixels au lieu de pourcentage. Est-ce que ce ce que vous voulez dire?

1
Litek

J'ai trouvé cela dans mon code lorsque j'utilisais une ration ou un pourcentage pour la hauteur de ligne line-height;1.5;

Ma page évoluait de telle sorte que les polices en minuscule et en majuscule prenaient différentes hauteurs de page (I.E. Toutes les majuscules prenaient plus de place que toutes les polices inférieures). Normalement, je trouve que ça a l'air mieux, mais je devais aller à une hauteur fixe line-height:24px; pour pouvoir prédire exactement combien de pixels chaque page prendrait avec un nombre donné de lignes.

0
thinklarge