Médiaforma

Les unités de mesure

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Pour définir certaines valeurs CSS, il est nécessaire d’utiliser une unité de mesure. Ces unités peuvent être absolues ou relatives.

Les unités absolues peuvent être entières ou réelles, mais sont toujours positives. Vous pouvez utiliser les unités absolues suivantes :

  • cm : centimètres
  • mm : millimètres
  • in : pouces. 1 in = 2,54 cm
  • pt : point. 1 pt vaut 1/72 in
  • pc : pica. 1 pc vaut 12 pt

Les deux dernières unités sont des mesures typographiques utilisées à l’origine par les imprimeurs.

Les unités relatives sont les suivantes :

  • em : unité relative à la taille de police de l’élément sélectionné
  • ex : unité relative à la taille des minuscules de l’élément sélectionné
  • px : pixels. Cette unité dépend de la résolution du périphérique d’affichage
  • % : unité relative à la taille de l’élément ou de son parent

Ce tableau est issu du site ReedDesign (http://reeddesign.co.uk/test/points-pixels.html). Il vous aidera à mieux comprendre l’équivalence entre les différentes mesures.

Points Pixels Em %
6pt 8px 0.5em 50%
7pt 9px 0.55em 55%
7.5pt 10px 0.625em 62.5%
8pt 11px 0.7em 70%
9pt 12px 0.75em 75%
10pt 13px 0.8em 80%
10.5pt 14px 0.875em 87.5%
11pt 15px 0.95em 95%
12pt 16px 1em 100%
13pt 17px 1.05em 105%
13.5pt 18px 1.125em 112.5%
14pt 19px 1.2em 120%
14.5pt 20px 1.25em 125%
15pt 21px 1.3em 130%
16pt 22px 1.4em 140%
17pt 23px 1.45em 145%
18pt 24px 1.5em 150%
20pt 26px 1.6em 160%
22pt 29px 1.8em 180%
24pt 32px 2em 200%
26pt 35px 2.2em 220%
27pt 36px 2.25em 225%
28pt 37px 2.3em 230%
29pt 38px 2.35em 235%
30pt 40px 2.45em 245%
32pt 42px 2.55em 255%
34pt 45px 2.75em 275%
36pt 48px 3em 300%

Les unités relatives peuvent être positives ou négatives. Par exemple, une propriété margin positive définit une marge extérieure positive pour l’élément concerné par rapport à son parent. Par contre, une propriété margin négative définit une marge extérieure négative par rapport à son parent.

Examinons ces quelques lignes de code et leur résultat dans Internet Explorer pour mieux comprendre.

Le corps du document contient trois <div> : un parent de classe conteneur et deux enfants de classes negatif et positif.

La classe conteneur définit un bloc de couleur rouge, de 400 pixels sur 400, décalé vers le bas de 100 pixels et vers la droite de 130 pixels.

La classe negatif définit un bloc de couleur bleue de 150×150 pixels. La marge gauche de ce bloc est négative. Elle est donc décalée de 50 pixels vers la gauche dans son parent, le div de classe conteneur.

Enfin, la classe positif définit un bloc de couleur jaune de 150×150 pixels. La marge gauche de ce bloc est positive. Elle est donc décalée de 200 pixels vers la droite dans son parent, le div de classe conteneur.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply