Bonjour à tous,
Ce post ne traite pas un problème concret, mais plutôt une question générale sur l'unité em, qui doit être préférée aux pixels pour définir les tailles de police (cf. l'excellent article de Florent V. gérer la taille du texte avec les « em »).
Pour résumer, en utilisant l'unité em, la taille du texte est calculée en fonction de la taille du texte de l'élément parent.
Par exemple:
Dans cet exemple, "blabla" sera écrit en taille 100% x 0.8 x 0.8 = 64% (donc très petit). 100% étant la taille par défaut choisie par le navigateur (ou l'utilisateur s'il zoome).
Comme je le disais, on comprend bien que l'unité em appliquée à un font-size se calcule par rapport à la taille de police de l'élément parent.
Ma question est: est-ce le cas également si on utilise cette unité pour d'autres propriétés que font-size ?
Reprenons l'exemple précédent en ajoutant une propriété line-height:
Comme tout à l'heure, le texte sera écrit en 100% x 0.8 x 0.8 = 0.64%. Mais qu'en est-il de la hauteur de la ligne ? Est-elle calculée également à partir de la taille de police de l'élément parent (ce qui donnerait 100% x 0.8 x 2 = 160%) ou par rapport à la taille de police de l'élément courant (ce qui donnerait 100% x 0.8 x 0.8 x 2 = 128%) ?
Je me pose cette question, car, supposons que je veule avoir une hauteur de ligne équivalente au double de la hauteur de police, je mettrais instinctivement "line-height:2em", ce qui ne marcherait que dans ma deuxième hypothèse.
De même, si je définis d'autres propriétés en em (des marges, des padding, ce genre de choses), les valeurs seront-elles relatives à l'élément parent ou à l'élément courant ?
Je sais pas si tout ça est très clair, mais ça fait un petit moment que ça me tracasse. Donc si quelqu'un a un avis, qu'il n'hésite pas
Bon dimanche à tous.
Modifié par jiber2fr (01 Aug 2010 - 10:50)
Ce post ne traite pas un problème concret, mais plutôt une question générale sur l'unité em, qui doit être préférée aux pixels pour définir les tailles de police (cf. l'excellent article de Florent V. gérer la taille du texte avec les « em »).
Pour résumer, en utilisant l'unité em, la taille du texte est calculée en fonction de la taille du texte de l'élément parent.
Par exemple:
<body style="font-size:100%">
<div style="font-size:0.8em">
<div style="font-size:0.8em">blabla</div>
</div>
<body>
Dans cet exemple, "blabla" sera écrit en taille 100% x 0.8 x 0.8 = 64% (donc très petit). 100% étant la taille par défaut choisie par le navigateur (ou l'utilisateur s'il zoome).
Comme je le disais, on comprend bien que l'unité em appliquée à un font-size se calcule par rapport à la taille de police de l'élément parent.
Ma question est: est-ce le cas également si on utilise cette unité pour d'autres propriétés que font-size ?
Reprenons l'exemple précédent en ajoutant une propriété line-height:
<body style="font-size:100%">
<div style="font-size:0.8em">
<div style="font-size:0.8em; line-height:2em">blabla</div>
</div>
<body>
Comme tout à l'heure, le texte sera écrit en 100% x 0.8 x 0.8 = 0.64%. Mais qu'en est-il de la hauteur de la ligne ? Est-elle calculée également à partir de la taille de police de l'élément parent (ce qui donnerait 100% x 0.8 x 2 = 160%) ou par rapport à la taille de police de l'élément courant (ce qui donnerait 100% x 0.8 x 0.8 x 2 = 128%) ?
Je me pose cette question, car, supposons que je veule avoir une hauteur de ligne équivalente au double de la hauteur de police, je mettrais instinctivement "line-height:2em", ce qui ne marcherait que dans ma deuxième hypothèse.
De même, si je définis d'autres propriétés en em (des marges, des padding, ce genre de choses), les valeurs seront-elles relatives à l'élément parent ou à l'élément courant ?
Je sais pas si tout ça est très clair, mais ça fait un petit moment que ça me tracasse. Donc si quelqu'un a un avis, qu'il n'hésite pas
Bon dimanche à tous.
Modifié par jiber2fr (01 Aug 2010 - 10:50)
).