28172 sujets

CSS et mise en forme, CSS3

Line height / font-size / élément remplacé

Bonjour à tous,

J'ai quelques difficultés à comprendre le calcul de hauteur effectué par les navigateurs pour le code ci dessous.
	
<div style="font-family:Arial; font-size:50px;line-height:16px;">
	  <img width="5" height="5">
</div>


Chrome / FF donnent un résultat équivalent : la div a une hauteur de 25 px.
Est ce que l'un de vous pourrait m'indiquer comment le calcul est réalisé ?

En vous remerciant,
Bonjour,
Merci pour ce message,

Quelques détails :
Je suis en cours de développement d'une application native (sur windows) qui affiche entre autre des contenus mails. Il s'agit d'un développement perso.
Pour certaines raisons, j'ai préféré ne pas m'adosser au moteur de rendu chromium (par exemple). Un moteur de rendu html minimaliste (pour les mails) a donc été développé.

Lors des développements, sur certains mails, j'ai relevé sur des divs, des "line-height" de 1px.
Dans ce cas précis, le calcul de la hauteur du div de mon moteur de rendu est erroné.

upload/1634019576-83697-2021-10-12080124.png

J'ai cherché à comprendre comment ce calcul était réalisé dans chromium ou gecko, sans grand succès.
J'ai également fait le tour des sites de dev les plus populaires, mais je n'ai pas eu de réponse appropriée.

Le source html de mon premier message reprend le problème rencontré.
Je n'arrive pas à identifier quelles sont les valeurs mises en jeu pour ce calcul.

En espérant avoir répondu à votre question,
Modifié par PROUX (12 Oct 2021 - 08:42)
Modérateur
Salut,

Tu t'embarque dans les méandre du CSS et de la typo Smiley lol

En gros c'est line-height qui va gérer la hauteur de ton bloc si la height n'est pas définie. La font-size n'agira pas dessus si line-height est fixée comme ça. Si tu mets :
<div style="font-family:Arial; font-size:50px;line-height:16px;">
  test
</div>

tu verras bien que ta ligne fait 16px.

Apres tu rajoute une image dedans donc ca foire un peu le calcul. Si tu la met en display bloc la hauteur est égale a 21px (donc les 16px + 5px d'image j'imagine) mais sinon en inline il doit y avoir un calcul particulier... faudrait creuser du coté img vs line-height.

Source : https://iamvdo.me/blog/css-avance-metriques-des-fontes-line-height-et-vertical-align
Modérateur
B'jour
_laurent a écrit :

Apres tu rajoute une image dedans donc ca foire un peu le calcul. ...
... faudrait creuser du coté img vs line-height.


En gros, si une image se trouve sur une ligne avec du texte et que celle-ci est plus haute que le line-height par défaut ou mis en place, cette ligne adapteras le line-height à la hauteur de l'image afin que celle-ci ne déborde pas sur le texte se trouvant sur les autres lignes.
je n'ai pas le lien dans la spec Smiley decu

Si on veut éviter cela, il faut soit la sortir du flux (position absolute/fixed), soit lui donner des marges négatives verticales (pour réduire la hauteur qu'elle occupe) , soit lui appliquer la hauteur du texte et lui appliquer un transform:scale(X); avec des marges latérales(compense l'espace qu'elle n'occupe pas au départ) pour lui redonner une taille à l'écran correspondant à ce que tu souhaites.

Cdt
Modifié par gcyrillus (12 Oct 2021 - 17:14)
Sujet clos
Aller à