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.
