Mesure
Mesure
Il existe différentes unités de mesure en CSS, nous présentons ici les plus fréquentes :
px
em
%
Complément : Éditeur
font-size :
Définition : px
L'unité pixel dépend du support sur lequel vous affichez. 1 pixel sur un smartphone, un moniteur ou une imprimante n'a pas la même taille.
Les pixels doivent être exprimés en valeur entière.
width: 100px;
L’intérêt du pixel, est d’être une unité absolu sur un même support.
Définition : em
L’unité em (cadratin) correspond à la hauteur de l'élément de plomb qui permettait de représenter les caractères en imprimerie. Étant donné que tous les caractères n'ont pas la même taille, la taille d'un cadratin est donc la taille minimale permettant de contenir tous les caractères possibles d'une police.
En CSS, on peut donner la taille d'écriture comme un multiple de la taille du parent.
See the Pen cours-css-proprietes-mesure-em by BCMM-W2D (@bcmm-w2d) on CodePen.
L'intérêt du em, est d'être une unité relative. Elle dépend de la taille de son parent.
Définition : rem
L’unité rem (root em) est semblable à em mais n'hérite pas de son parent mais de la racine du document.
Définition : %
La taille d'un élément peut être exprimée comme un pourcentage de la taille de son parent.
<div>
<p>Bonjour</p>
</div>
div {width:200px;}
div p {width:50%}
Le paragraphe aura une taille de 100px.