Blup!

L'unité em en CSS correspond (en gros) à l'espace que pourrait occuper un caractère standard de la police en cours. Plus précisément, elle basée sur le cadratin, espace blanc carré utilisé en typographie, dont le côté est égal à la taille des caractères. On néglige parfois souvent cette unité qui peut se révéler très pratique lorsqu'on est confronté à des problèmes de décalage de la mise en page avec les personnes utilisant la fonctionnalité "augmenter la taille du texte" dans le navigateur, que ce soit Mozilla, IE, Opera ou les autres.

Imaginons un petit div auquel vous avez appliqué un fond, une bordure, et... une hauteur définie en pixels avec l'unité px. En agrandissant la taille du texte d'un coup de ctrl+molette, paf tout se téléscope et le texte sort du div. En spécifiant une hauteur avec l'unité em, la taille s'ajustera dynamiquement à la police d'affichage. Par exemple :

div.texte {
  background:#369;
  border:1px solid #000;
  height:1.5em;
}

Sachant qu'1em correspond à la hauteur courante de la police. Bien sûr, rien ne vous empêche de conserver les dimensions en px pour les autres éléments de mise en forme qui ne sont pas affectés par les polices, comme les borders, voire aussi les marges. En ce qui concerne ces dernières, l'unité em est pratique pour définir rapidement une marge correspondant à 2 sauts de ligne par exemple : 2em. A noter qu'il existe aussi ex qui correspond à la hauteur par défaut du caractère 'x' de la police courante.

Cet article a été publié le mercredi 3 mars 2004 et est classé dans Webdesign.