En CSS, les unités de mesure sont utilisées pour spécifier différentes propriétés, comme la largeur, la hauteur, la marge, le rembourrage (padding), la taille de la police, et autres. Voici comment les utiliser :
1. Pixels (px) : Les pixels sont des unités fixes qui permettent un contrôle très précis de la taille. Par exemple :
```
p {
font-size: 15px;
}
```
1. Pourcentage () : Les pourcentages sont basés sur la taille de l’élément parent. Par exemple, si le parent mesure 500px et que l’élément enfant a une largeur de 50, cela signifie que l’élément enfant aura une largeur de 250px.
```
div {
width: 50%;
}
```
1. Em : L’unité ‘em’ est basée sur la taille de la police de l’élément parent. Par exemple, si la taille de la police de l’élément parent est de 16px, 1em est égal à 16px pour cet élément.
```
p {
padding: 2em;
}
```
1. Rem : L’unité ‘rem’ est similaire à ‘em’, mais au lieu de se baser sur la taille de la police de l’élément parent, elle se base sur la taille de la police de la racine de la page (en général, le ‘html’ ou ‘body’).
```
h1 {
font-size: 2rem;
}
```
1. Viewport Width (vw) et Viewport Height (vh) : Ces unités sont basées sur la taille de la fenêtre de visualisation. 1vw est égal à 1% de la largeur de la fenêtre de visualisation. 1vh est égal à 1% de la hauteur de la fenêtre de visualisation.
```
div {
width: 50vw;
height: 50vh;
}
```
1. Point (pt) : Cette unité est principalement utilisée pour les imprimés. 1pt = 1/72 inch.
```
p {
font-size: 12pt;
}
```
1. Centimetre (cm), Millimetre (mm), Inch (in) : Ces unités sont absolutes et ne dépendent d’aucun autre élément.
```
div {
width: 10cm;
}
```
Il est important de comprendre quand utiliser chaque unité, car cela peut affecter la mise en page sur différents appareils ou écrans.
