4.8 Unités de taille CSS

18 octobre 2018

Dimensionnement du contenu et de l’espace

Il existe de nombreuses propriétés CSS nécessitant des unités de taille :

font-size définit la taille du texte
border-width définit l’épaisseur des bordures d’élément
margin définit l’espacement entre les éléments
left/right/top/bottom permet de positionner et de déplacer des éléments

Les unités les plus utilisées sont :

px pour les pixels
% pour pourcentage
em pour le dimensionnement par rapport au font-size de l’élément parent..

Pixels

Comme les écrans d’ordinateur utilisent des pixels pour afficher le contenu, c’est l’unité de taille la plus courante en CSS.

Il peut être utilisé pour fixer la largeur – width d’un élément :

body{ width: 400px;}

Ou définir la taille du texte – font-size :

body { font-size: 20px;}

Les pixels en CSS sont simples car ils définissent des valeurs absolues : ils ne sont pas affectés par les autres propriétés CSS héritées.

Ils sont également largement utilisés à des fins de positionnement et d’espacement.

Les pourcentages

Les pourcentages sont des unités relatives : ils dépendent du parent et / ou de l’ancêtre de l’élément.

Par exemple, les éléments de niveau bloc tels que les paragraphes occupent naturellement toute la largeur disponible. La règle CSS suivante les redimensionnera à la moitié de la largeur disponible.

p { width: 50%;}

Les pourcentages peuvent aider à définir d’autres propriétés CSS, telles que la taille du texte :

strong { font-size: 150%;}

<p>Des défis <strong>importants</strong> nous attendent.</p>

Em

em est une unité relative: elle dépend de la valeur de la taille de la police – font-size de l’élément.

Par exemple, si le parent a une taille de police de 20px Par exemple, si le parent a une taille de police de 20px et que vous appliquez font-size: 0.8em à un élément enfant, cet élément enfant affichera une taille de police de 16px.

Ne confondez pas l’unité de taille em CSS size unit and the em CSS et le sélecteur em CSS qui cible <em> l’élément HTML.

L’unité em est intéressante car vous définissez les tailles de police des éléments HTML les uns par rapport aux autres. Pour concevoir une page Web agréable et facile à lire, vous avez besoin d’une profondeur visuelle constante. Par exemple, vous voulez que votre <h1> soit deux fois plus grand que votre corps de texte, votre <h2> seulement 1,5 fois plus grand et votre barre latérale légèrement plus petite. Ceci pourrait facilement être réalisé en CSS :

body { font-size:16px;}
h1 { font-size: 2em;} /* = 32px */
h2 { font-size: 1.5em;} /* = 24px */
aside { font-size: 0.75em;} /* = 12px */

Si vous décidez de modifier la taille de votre corps de texte, la taille relative de vos en-têtes et de votre barre latérale changera en conséquence, et votre page Web restera équilibrée visuellement.

En changeant juste une valeur, toutes les autres valeurs sont modifiées :

body { font-size: 20px;}
h1 { font-size: 2em;} /* = 40px */
h2 { font-size: 1.5em;} /* = 30px */
aside { font-size: 0.75em;} /* = 16px */

Rem

L’unité rem est similaire à em, mais au lieu de dépendre de la valeur du parent, elle s’appuie sur la valeur de l’élément racine, qui est l’élément <html>.

html { font-size: 18px;}
body {font-size: 1rem;} /* = 18px */
h1 { font-size: 2rem;} /* = 36px */
h2 { font-size: 1.5rem;} /* = 27px */

La différence entre rem et em est que les valeurs de rem sont fixes alors que les valeurs em peuvent se multiplier entre elles.

Si vous définissez html{ font-size: 18px;}:

2rem sera toujours égal à 36px, peu importe où vous utilisez dans votre CSS
2em sera toujours égal au double de la taille de la police du parent – font-size, donc pas nécessairement, so not necessarily 36px

Exemple rapide dans lequel 2em est différent de 2rem:

html { font-size: 20px;}
p { font-size: 0.8rem;} /* = 16px */
p span { font-size: 2em;} /* = 16px * 2 = 32px */
p strong {font-size: 2rem;} /* = 20px * 2 = 40px */

Le span dépend de la valeur de la taille de la police de p tandis que la valeur de strong repose sur la valeur de la taille de la police html html.

Quelle unité utiliser ?

Je recommande de commencer par les pixels : comme il s’agit de valeurs absolues, elles ne sont pas affectées par le contexte de l’élément. Elles sont simples, permettent de définir la taille du texte, les dimensions de l’image, la largeur de la bordure, les coordonnées de position…

Les pourcentages et les valeurs em peuvent être utilisés à côté des pixels, en particulier pour les tailles de texte relatives.