📏 Les Unités CSS

px, em, rem, %, vw, vh...

Comprendre et maîtriser toutes les unités

Formation DWWM - 2025-2026

Au programme aujourd'hui 📋

  • 🎯 Introduction : Pourquoi tant d'unités différentes ?
  • 📐 px (pixels) : L'unité absolue
  • 📊 % (pourcentage) : Relatif au parent
  • 🔤 em : Relatif à la police du parent
  • 🎯 rem : Relatif à la police racine
  • 📱 vw et vh : Relatif à la taille de l'écran
  • 🔍 Autres unités : vmin, vmax, ch...
  • ⚖️ Comparaisons : Quelle unité choisir ?
  • 💡 Cas pratiques : Exemples concrets

🎓 Partie 1

Introduction

Pourquoi plusieurs unités ?

Le défi du web responsive 🌍

Le problème :
Votre site web doit fonctionner sur :
  • 📱 Un smartphone (375px de large)
  • 📱 Une tablette (768px de large)
  • 💻 Un ordinateur portable (1366px de large)
  • 🖥️ Un grand écran (1920px de large)
  • 📺 Un écran 4K (3840px de large)
⚠️ Si on utilise seulement des pixels :
Un texte de 16px sera minuscule sur un écran 4K
Une boîte de 300px prendra tout l'écran mobile
Rien ne s'adapte automatiquement !

Les unités : une solution 💡

🎨 Analogie de la recette de cuisine :

Unités absolues (px) = "Mettez 200g de farine"
→ Quantité fixe, précise, mais ne s'adapte pas

Unités relatives (%, em, rem) = "Mettez 2 verres par personne"
→ S'adapte au nombre de personnes (contexte)
💡 Le principe :
Les unités relatives permettent aux éléments de s'adapter
automatiquement à leur contexte (écran, parent, préférences...)

Les 2 familles d'unités 👨‍👩‍👧‍👦

Famille Unités Principe
Absolues px, cm, mm, pt, in Taille fixe qui ne change pas
Relatives %, em, rem, vw, vh, vmin, vmax Taille qui s'adapte au contexte
💡 En pratique :
On utilise majoritairement des unités RELATIVES
pour créer des sites responsive et accessibles

Aperçu rapide des unités 🗺️

Unité Se base sur Usage typique
px Rien (fixe) Bordures, détails précis
% Taille du parent Largeurs, layouts
em Font-size du parent Espacements dans composants
rem Font-size de <html> Tailles de texte, espacements globaux
vw / vh Taille de l'écran Sections plein écran

📐 Partie 2

Pixels (px)

L'unité absolue

Qu'est-ce qu'un pixel ? 📐

px = pixel CSS

Unité de mesure absolue
1px représente toujours la même taille
(indépendamment du contexte)
🧱 Analogie des briques LEGO :

Un pixel = Une brique LEGO standard

Si vous dites "10 briques", ça fait toujours 10 briques
Peu importe la taille de votre table
La taille ne change jamais !

Utiliser les pixels 💻

/* Tout est en pixels */
.box {
    width: 300px;
    height: 200px;
    font-size: 16px;
    padding: 20px;
    margin: 10px;
    border: 2px solid black;
}

/* Ces dimensions sont FIXES
   Elles ne changeront jamais */
📝 Lecture :
width: 300px = "Largeur de exactement 300 pixels"
Peu importe la taille de l'écran, ce sera toujours 300px

Démonstration visuelle 👀

Éléments en pixels (fixes) :

100px × 50px
200px × 50px
300px × 50px

👆 Redimensionnez le navigateur → Les tailles restent identiques !

Pixels CSS vs pixels physiques 🔬

⚠️ Nuance importante :
Il existe 2 types de pixels différents !
Pixel CSS = L'unité dans votre code
width: 100px → 100 unités CSS

Pixel physique = Point lumineux réel sur l'écran
Un écran Retina peut avoir 2× ou 3× plus de pixels physiques !
Écran standard (densité 1×) : ┌─┬─┬─┬─┐ │ │ │ │ │ 4 pixels CSS = 4 pixels physiques └─┴─┴─┴─┘ Écran Retina (densité 2×) : ┌┬┬┬┬┬┬┬┬┐ ├┼┼┼┼┼┼┼┼┤ 4 pixels CSS = 16 pixels physiques └┴┴┴┴┴┴┴┴┘ Plus net, mais même taille visuelle !
💡 En pratique :
Le navigateur gère automatiquement la conversion
Vous codez en pixels CSS, ne vous inquiétez pas du reste !

Avantages et limites ⚖️

✅ Avantages des pixels :
  • Précision : Contrôle exact de la taille
  • Simplicité : Facile à comprendre
  • Prévisibilité : Toujours la même taille
❌ Inconvénients des pixels :
  • Pas responsive : Ne s'adapte pas aux écrans
  • Accessibilité : Ignore les préférences de zoom
  • Rigidité : Pas flexible pour le design fluide

Quand utiliser les pixels ? 🎯

✅ Utilisez px pour :
  • Bordures : border: 1px solid
  • Ombres : box-shadow: 0 2px 4px
  • Border-radius : border-radius: 8px
  • Petits détails : icônes, espacements minimes
  • Media queries : points de rupture
❌ Évitez px pour :
  • Font-size → Préférez rem
  • Largeurs/hauteurs → Préférez %, rem, vw/vh
  • Padding/margin principaux → Préférez rem

📊 Partie 3

Pourcentage (%)

Relatif au parent

Comment fonctionne % ? 📊

% = Pourcentage de la taille du PARENT

width: 50% = 50% de la largeur du parent
height: 100% = 100% de la hauteur du parent
🎂 Analogie du partage de gâteau :

Le parent = Un gâteau entier

width: 25% = Je prends 1/4 du gâteau
width: 50% = Je prends la moitié
width: 100% = Je prends tout !

Si le gâteau est petit → ma part est petite
Si le gâteau est grand → ma part est grande

Utiliser les pourcentages 💻

<div class="parent" style="width: 800px;">
    <div class="enfant" style="width: 50%;">
        Je fais 50% de 800px = 400px
    </div>
</div>
/* Le parent définit la référence */
.parent {
    width: 800px;
}

/* L'enfant prend un % du parent */
.enfant {
    width: 50%;    /* 50% de 800px = 400px */
    height: 100%;  /* 100% de la hauteur du parent */
}
⚠️ Important :
Le % se calcule TOUJOURS par rapport au parent !
Si le parent change, l'enfant s'adapte automatiquement

Démonstration visuelle 👀

Parent container

width: 100%
width: 75%
width: 50%
width: 25%

👆 Redimensionnez → Tout s'adapte proportionnellement !

% selon les propriétés 🎯

💡 Attention :
Le % ne se calcule pas toujours sur la même chose !
Propriété % calculé sur Exemple
width Largeur du parent Parent 800px → 50% = 400px
height Hauteur du parent Parent 600px → 50% = 300px
padding Largeur du parent (!) Parent 800px → 5% = 40px
margin Largeur du parent (!) Parent 800px → 10% = 80px
font-size Font-size du parent Parent 16px → 150% = 24px
⚠️ Piège : padding-top et padding-bottom
se basent sur la LARGEUR du parent, pas la hauteur !

Le problème du height: 100% 😱

/* ❌ Ceci ne marche souvent PAS */
.element {
    height: 100%;  /* 100% de quoi ??? */
}

/* Pour que ça marche, le parent doit avoir une hauteur */
html, body {
    height: 100%;
}

.parent {
    height: 100%;
}

.element {
    height: 100%;  /* Maintenant ça marche ! */
}
💀 Erreur fréquente :
height: 100% ne fonctionne que si le parent a une hauteur définie !
Sans hauteur définie sur le parent → l'élément aura 0px de haut

Cas d'usage du % ✅

✅ Utilisez % pour :
  • Layouts fluides : colonnes adaptatives
  • Images responsive : width: 100%
  • Grilles proportionnelles : diviser en parts égales
  • Conteneurs flexibles : remplir le parent
/* Exemple : Layout 3 colonnes */
.col-1 { width: 33.33%; float: left; }
.col-2 { width: 33.33%; float: left; }
.col-3 { width: 33.34%; float: left; }

/* Image responsive */
img {
    width: 100%;
    height: auto;
}

🔤 Partie 4

EM

Relatif au font-size du parent

Comment fonctionne em ? 🔤

1em = font-size de l'élément PARENT

Si le parent a font-size: 20px
→ 1em = 20px
→ 2em = 40px
→ 0.5em = 10px
👨‍👦 Analogie parent-enfant :

Votre père mesure 1m80

height: 1em = "Je mesure comme papa" = 1m80
height: 0.5em = "Je mesure la moitié de papa" = 90cm
height: 2em = "Je mesure 2× papa" = 3m60

Si papa grandit → vous grandissez proportionnellement !

Utiliser em 💻

<div class="parent" style="font-size: 20px;">
    <div class="enfant" style="font-size: 1.5em;">
        Ma taille = 1.5 × 20px = 30px
    </div>
</div>
/* Le parent définit la base */
.parent {
    font-size: 20px;
}

/* L'enfant utilise em */
.enfant {
    font-size: 1.5em;    /* 1.5 × 20px = 30px */
    padding: 1em;        /* 1 × 30px = 30px (!) */
    margin: 0.5em;       /* 0.5 × 30px = 15px */
}
⚠️ Subtilité importante :
Pour padding et margin, le em
se base sur le font-size de L'ÉLÉMENT LUI-MÊME, pas du parent !

Le danger de la cascade 🌊

<div style="font-size: 16px;">           <!-- 16px -->
    <div style="font-size: 1.2em;">        <!-- 1.2 × 16 = 19.2px -->
        <div style="font-size: 1.2em;">    <!-- 1.2 × 19.2 = 23px -->
            <div style="font-size: 1.2em;">  <!-- 1.2 × 23 = 27.6px -->
                Ça grossit de plus en plus !
            </div>
        </div>
    </div>
</div>
💀 Le piège du em :
Les em se multiplient en cascade !
Plus vous imbriquez, plus ça grossit rapidement

Solution : Utilisez rem pour éviter ce problème !

Démonstration de la cascade 👀

Niveau 0 : 16px
Niveau 1 : 1.2em = 19.2px
Niveau 2 : 1.2em = 23px
Niveau 3 : 1.2em = 27.6px

⚠️ Ça grossit vite !

Quand utiliser em ? 🎯

✅ Utilisez em pour :
  • Espacements locaux : dans un composant isolé
  • Composants qui s'adaptent : boutons, cartes
  • Proportions cohérentes : padding relatif au texte
/* Bouton qui s'adapte à sa taille de texte */
.btn {
    font-size: 16px;
    padding: 0.5em 1em;      /* S'adapte au font-size */
    border-radius: 0.25em;   /* Proportionnel aussi */
}

.btn-large {
    font-size: 24px;
    /* Le padding et border-radius s'adaptent auto ! */
}

.btn-small {
    font-size: 12px;
    /* Tout reste proportionnel */
}

🎯 Partie 5

REM

Relatif au root (racine)

Comment fonctionne rem ? 🎯

1rem = font-size de l'élément RACINE (<html>)

Par défaut : 1rem = 16px
(taille par défaut des navigateurs)
👑 Analogie du roi :

Le roi (<html>) décide de la mesure de référence

font-size: 1rem = "Comme le roi l'a décidé"
padding: 2rem = "2× la mesure du roi"

Peu importe où vous êtes dans le royaume (page),
vous vous référez TOUJOURS au roi !

Pas d'effet cascade !

Utiliser rem 💻

/* On définit la taille racine */
html {
    font-size: 16px;  /* 1rem = 16px */
}

/* Partout dans le site */
h1 {
    font-size: 2.5rem;     /* 2.5 × 16px = 40px */
}

h2 {
    font-size: 2rem;       /* 2 × 16px = 32px */
}

p {
    font-size: 1rem;       /* 1 × 16px = 16px */
    margin-bottom: 1rem;   /* 16px */
}

.card {
    padding: 1.5rem;       /* 24px */
    margin: 2rem;          /* 32px */
}
💡 Avantage majeur :
Pas d'effet cascade ! 1rem vaut toujours la même chose

rem vs em : La différence 🆚

Critère em rem
Référence Font-size du parent Font-size de <html>
Cascade ✅ Oui (multiplicatif) ❌ Non (stable)
Prévisibilité Difficile (dépend du contexte) Facile (toujours pareil)
Usage Composants locaux Architecture globale 
<div style="font-size: 20px;">
    <p style="font-size: 1em;">20px (em)</p>
    <p style="font-size: 1rem;">16px (rem)</p>
</div>

L'astuce des 62.5% 🎯

/* Technique pour simplifier les calculs */
html {
    font-size: 62.5%;  /* 62.5% de 16px = 10px */
}

/* Maintenant 1rem = 10px ! */
body {
    font-size: 1.6rem;  /* 16px */
}

h1 {
    font-size: 3.2rem;  /* 32px */
}

h2 {
    font-size: 2.4rem;  /* 24px */
}

p {
    font-size: 1.4rem;  /* 14px */
    margin: 2rem;       /* 20px */
}

/* Calculs mentaux plus faciles ! */
💡 Pourquoi 62.5% ?
62.5% de 16px = 10px
Donc 1.6rem = 16px, 2.4rem = 24px, etc.
Plus simple à calculer !

Accessibilité avec rem 👁️

💡 Gros avantage :
Les rem respectent les préférences de zoom de l'utilisateur !
L'utilisateur augmente la taille du texte dans son navigateur : Paramètres → Zoom texte à 125% html { font-size: 16px; → Devient automatiquement 20px ! } h1 { font-size: 2rem; → 2 × 20px = 40px (au lieu de 32px) } /* TOUT le site s'adapte ! */
⚠️ Avec des pixels :
font-size: 16px reste 16px même si l'utilisateur zoom
= Mauvais pour l'accessibilité !

Quand utiliser rem ? 🎯

✅ Utilisez rem pour :
  • Font-size : Toutes les tailles de texte
  • Spacing global : margin, padding principaux
  • Largeurs/hauteurs : Dimensions de composants
  • Media queries : Points de rupture accessibles
/* Architecture moderne */
html {
    font-size: 16px;
}

/* Tout en rem */
body {
    font-size: 1rem;
    line-height: 1.5;
}

.container {
    max-width: 80rem;     /* 1280px */
    padding: 2rem;        /* 32px */
    margin: 0 auto;
}

.section {
    margin-bottom: 4rem;  /* 64px */
}
💡 Règle moderne :
Utilisez rem partout sauf pour les petits détails (bordures...)

📱 Partie 6

vw et vh

Relatif à la taille de l'écran

Comment fonctionnent vw et vh ? 📱

vw = Viewport Width (largeur de l'écran)
1vw = 1% de la largeur de l'écran
100vw = toute la largeur

vh = Viewport Height (hauteur de l'écran)
1vh = 1% de la hauteur de l'écran
100vh = toute la hauteur
🪟 Analogie de la fenêtre :

Votre écran = Une fenêtre

width: 100vw = "Aussi large que la fenêtre"
height: 100vh = "Aussi haut que la fenêtre"
width: 50vw = "La moitié de large"

Redimensionnez la fenêtre → Tout s'adapte !

Utiliser vw et vh 💻

/* Section plein écran */
.hero {
    width: 100vw;   /* Toute la largeur */
    height: 100vh;  /* Toute la hauteur */
}

/* Titre responsive */
h1 {
    font-size: 5vw;  /* 5% de la largeur de l'écran */
    /* Sur 1920px → 96px
       Sur 375px → 18.75px */
}

/* Sidebar proportionnelle */
.sidebar {
    width: 20vw;  /* Toujours 20% de l'écran */
}

/* Centrage */
.box {
    width: 50vw;
    height: 50vh;
    margin-left: 25vw;
    margin-top: 25vh;
}

Démonstration 👀

Éléments en vw/vh :

width: 100vw (toute la largeur écran)
width: 50vw (moitié largeur)
width: 25vw (quart largeur)
height: 50vh
(moitié hauteur écran)

👆 Redimensionnez la fenêtre → S'adapte en direct !

Le piège du 100vw 😱

💀 Problème :
100vw inclut la barre de défilement (scrollbar) !
→ Peut créer un scroll horizontal indésirable 
/* ❌ PROBLÈME */
.section {
    width: 100vw;  /* Déborde à cause de la scrollbar */
}

/* ✅ SOLUTION 1 : Utiliser 100% */
.section {
    width: 100%;   /* S'adapte sans déborder */
}

/* ✅ SOLUTION 2 : Cacher le débordement */
body {
    overflow-x: hidden;
}

.section {
    width: 100vw;
}

vmin et vmax 🎯

Unité Signification Calcul
vw Viewport Width 1% de la largeur
vh Viewport Height 1% de la hauteur
vmin Minimum 1% du PLUS PETIT côté
vmax Maximum 1% du PLUS GRAND côté 
/* vmin : garde les proportions */
.square {
    width: 50vmin;
    height: 50vmin;
    /* Reste carré sur tous les écrans ! */
}

.text {
    font-size: 5vmin;
    /* Lisible sur mobile ET desktop */
}

Quand utiliser vw/vh ? 🎯

✅ Utilisez vw/vh pour :
  • Hero sections : height: 100vh
  • Typographie fluide : font-size: 5vw
  • Sidebars : width: 20vw
  • Éléments centrés : avec vw/vh
/* Hero plein écran */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Titre fluide avec limites */
h1 {
    font-size: clamp(2rem, 5vw, 5rem);
    /* Min 2rem, idéal 5vw, max 5rem */
}

🔍 Partie 7

Autres unités

ch, vmin, vmax...

L'unité ch 📝

ch = Largeur du caractère "0"

Utile pour limiter la largeur du texte
et garantir une bonne lisibilité 
/* Largeur optimale pour la lecture */
p {
    max-width: 60ch;
    /* Maximum 60 caractères par ligne */
}

.article {
    max-width: 70ch;
    margin: 0 auto;
    /* Texte centré et lisible */
}

input {
    width: 20ch;
    /* Largeur de 20 caractères */
}
💡 Règle de lisibilité :
45-75 caractères par ligne = confort de lecture optimal
→ max-width: 60ch est parfait !

Tableau complet des unités 📊

Unité Type Se base sur Usage
px Absolu Rien (fixe) Bordures, détails
% Relatif Taille du parent Layouts, colonnes
em Relatif Font-size du parent Composants locaux
rem Relatif Font-size racine Architecture globale
vw Relatif Largeur écran Largeurs fluides
vh Relatif Hauteur écran Sections plein écran
vmin Relatif Plus petit côté Éléments carrés
vmax Relatif Plus grand côté Texte adaptatif
ch Relatif Largeur du "0" Largeur de texte

Les unités d'impression 🖨️

Unité Nom Usage
cm Centimètres Print CSS uniquement
mm Millimètres Print CSS uniquement
in Inches (pouces) Print CSS uniquement
pt Points (1/72 pouce) Print CSS, documents
⚠️ Pour le web :
N'utilisez JAMAIS cm, mm, in, pt pour les sites web !
Ces unités sont réservées à l'impression

⚖️ Partie 8

Comparaisons

Quelle unité choisir ?

Pour le font-size 🔤

Unité ✅ Avantage ❌ Inconvénient Verdict
px Précis Pas accessible ❌ À éviter
em Contextuel Effet cascade ⚠️ Rare
rem Accessible, stable Aucun ✅ IDÉAL
vw Fluide Besoin limites ✅ Avec clamp() 
/* ✅ RECOMMANDÉ */
html {
    font-size: 16px;
}

body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }

/* Avec fluidité */
h1 {
    font-size: clamp(2rem, 5vw, 4rem);
}

Pour width/height 📐

Contexte Unité Exemple
Container principal % + max-width width: 100%; max-width: 1200px;
Colonnes layout % width: 33.33%;
Hero section vh height: 100vh;
Composant fixe px ou rem width: 300px;
Image responsive % width: 100%; height: auto;

Pour margin/padding 📏

🎯 Recommandation :
Utilisez rem pour la cohérence globale 
/* Système d'espacement avec rem */
.space-xs  { margin: 0.25rem; }  /*  4px */
.space-sm  { margin: 0.5rem; }   /*  8px */
.space-md  { margin: 1rem; }     /* 16px */
.space-lg  { margin: 2rem; }     /* 32px */
.space-xl  { margin: 4rem; }     /* 64px */

/* OU avec em pour composants */
.btn {
    padding: 0.5em 1em;
    /* S'adapte au font-size du bouton */
}

/* ❌ Évitez px */
.container {
    margin: 20px;  /* Pas accessible */
}

Guide de décision rapide 🎯

Arbre de décision : FONT-SIZE ? ├─ ✅ Oui → rem (ou clamp() avec vw) └─ Non ↓ BORDURE / OMBRE ? ├─ ✅ Oui → px └─ Non ↓ SPACING (margin/padding) ? ├─ Global → rem ├─ Local (dans composant) → em └─ Non ↓ LARGEUR ? ├─ Layout colonnes → % ├─ Plein écran → vw (attention scrollbar) ├─ Container → % + max-width └─ Fixe → px/rem HAUTEUR ? ├─ Plein écran → vh ├─ Relatif parent → % └─ Fixe → px/rem

Combiner intelligemment 🎨

/* ✅ EXCELLENT : Mix intelligent */
.card {
    /* Largeur fluide avec limite */
    width: 100%;
    max-width: 400px;
    
    /* Espacement cohérent */
    padding: 2rem;
    margin: 1rem;
    
    /* Détails précis */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    
    /* Typographie accessible */
    font-size: 1rem;
}

/* Hero moderne */
.hero {
    height: 100vh;
    padding: 4rem 2rem;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 5rem);
    margin-bottom: 2rem;
}

💡 Partie 9

Cas pratiques

Exemples concrets

Système de typographie 📝

/* Tout en rem */
html {
    font-size: 16px;
}

body {
    font-size: 1rem;
    line-height: 1.5;
}

/* Échelle de titres */
h1 { font-size: 3rem; }       /* 48px */
h2 { font-size: 2.25rem; }    /* 36px */
h3 { font-size: 1.75rem; }    /* 28px */
h4 { font-size: 1.5rem; }     /* 24px */
h5 { font-size: 1.25rem; }    /* 20px */
h6 { font-size: 1rem; }       /* 16px */

/* Variantes */
.text-sm { font-size: 0.875rem; }  /* 14px */
.text-xs { font-size: 0.75rem; }   /* 12px */

/* Responsive */
h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

Layout responsive 📱

/* Container fluide */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Grid adaptatif */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Layout sidebar + content */
.layout {
    display: flex;
    gap: 2rem;
}

.sidebar {
    width: 25%;
    min-width: 250px;
}

.content {
    flex: 1;
}

@media (max-width: 768px) {
    .layout {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
    }
}

Composant bouton 🔘

/* Bouton adaptatif */
.btn {
    /* Typo */
    font-size: 1rem;
    font-weight: 600;
    
    /* Espacement proportionnel */
    padding: 0.75em 1.5em;
    
    /* Détails */
    border: 2px solid transparent;
    border-radius: 0.5rem;
    
    /* Transitions */
    transition: all 0.3s;
    cursor: pointer;
}

/* Variantes de taille */
.btn-sm {
    font-size: 0.875rem;
    /* padding s'adapte automatiquement ! */
}

.btn-lg {
    font-size: 1.25rem;
    /* padding s'adapte automatiquement ! */
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

Hero section 🎨

/* Hero plein écran */
.hero {
    min-height: 100vh;
    padding: 4rem 2rem;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero h1 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    margin-bottom: 1.5rem;
    max-width: 20ch;
}

.hero p {
    font-size: clamp(1rem, 2vw, 1.25rem);
    max-width: 60ch;
    margin-bottom: 2rem;
}

@media (max-width: 768px) {
    .hero {
        min-height: 80vh;
        padding: 2rem 1rem;
    }
}

Système d'espacement 📏

/* Variables CSS pour spacing */
:root {
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
}

/* Classes utilitaires */
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* Usage */
.card {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

Erreurs à éviter ❌

❌ Erreur 1 : Tout en pixels 
/* Pas responsive ni accessible */
p { font-size: 16px; }
.container { width: 1200px; }
❌ Erreur 2 : Cascade de em 
/* Tailles imprévisibles */
.parent { font-size: 1.2em; }
.child { font-size: 1.2em; }  /* 1.44× ! */
❌ Erreur 3 : vw sans limites 
/* Trop petit mobile, trop gros desktop */
p { font-size: 3vw; }

Checklist finale ✅

Avant de dimensionner :
  1. ✅ Font-size → rem
  2. ✅ Spacing global → rem
  3. ✅ Spacing local → em
  4. ✅ Largeurs layout → % + max-width
  5. ✅ Hero/fullscreen → vh
  6. ✅ Bordures/ombres → px
  7. ✅ Tester responsive
  8. ✅ Tester accessibilité (zoom)

🎉 Récapitulatif

Les unités essentielles :
  • px : Détails précis uniquement
  • rem : Base de l'architecture (RECOMMANDÉ)
  • em : Composants contextuels
  • % : Layouts et colonnes
  • vw/vh : Plein écran et fluidité
  • ch : Largeur de texte optimale
💡 La règle d'or :
rem partout + px pour les détails + % pour les layouts
= Site responsive et accessible ! 🚀

Vous maîtrisez les unités CSS ! 🎯

Merci ! 👏

Questions ?

📏 N'oubliez pas de pratiquer !

Créez un système de design avec rem
et testez sur différents écrans ! 💪