## Les unités de taille (longueur, hauteur, etc)

L'unité à choisir pour valoriser une propriété CSS dépend avant tout du support utilisé pour l'affichage du document : écran ou papier.

La tableau suivant liste les principales unités couramment utilisées. Une liste complète peut être trouvée dans les specifications du W3C.

Unité | Signification | Support Type
`px` | Pixel CSS. 1 pixel CSS= 1/96 pouce = 0.0265 mm Exemple : `width: 500px;` | Absolue
`em` | Cadratin. Taille d'une police par rapport à celle du parent. Exemple : `font-size: 1.5em;` | Relative
`rem` | Taille d'une police par rapport à celle de la racine du document (élément html). Exemple : `font-size: 0.75rem;` | Relative
`%` | Pourcentage par rapport à la valeur de la propriété dans l'élément parent. Exemple : `height: 80%;` Remarque : un pourcentage n'est pas vraiment une unité, mais pour simplifier il est classé ici. | Relative
`in` | Pouce (inch). 1 in = 2.54 cm Exemple : `width: 10in;` | Absolue
`cm` | Centimètre Exemple : `width: 5.4cm;` | Absolue
`mm` | Millimètre Exemple : `width: 105mm;` | Absolue
`pt` | Point (unité la plus petite en typographie). 1 point = 1/72 pouce = 0.351 mm Exemple : `width: 20pt;` | Absolue
`pc` | Pica (unité de mesure standard typographique. Système en base 12). 1 pica = 12 points = 4.212 mm Exemple : `width: 10pc;` | Absolue

Chaque fois qu'une valeur de propriété est un nombre, il faut préciser l'unité utilisée, sinon la propriété ne sera pas prise en compte.

Cette règle a 3 exceptions :

- quand le nombre est égal à 0,
- la propriété line-height
- la propriété border-image

L'unité doit être collée au nombre.
`width: 100px` est correct.
`width: 100 px` sera ignoré et la propriété ne sera pas prise en compte.

Il n'y a pas de restriction sur l'unité pouvant être utilisée avec une propriété qui a une valeur numérique : on pourra préciser cette valeur en pixels (`width: 100px`), en pouces (`width: 45in`), en pourcentage (`width: 50%`), ou en n'importe quelle autre unité reconnue par les CSS.

Les unités permettant de définir une taille peuvent être :

- des "unités absolues" : elles sont fixes les unes par rapport aux autres (exemple centimètres et millimétres) et ancrées dans la réalité physique,
- des "unités relatives" : elles définissent une taille relativement à une autre taille.

Le pixel CSS est un peu différent du pixel écran dont la taille en centimètre dépend de la densité de pixels par pouce sur la dalle écran (DPI - Density Per Inch - ou PPI - Pixels Per Inch). Les écrans fixes ont généralement une densité de 96 PPI, les écrans de portable de 125 PPI et les écrans de smartphone ou de tablette de 160 PPI.
Pour le W3C, le 'pixel CSS' de référence est de 96 PPI. http://www.w3.org/TR/css3-values/#reference-pixel

## Conversion pixel / em / pourcentage / point

Taille de base