01Créer un rythme agréable à lire
Choisissez une hauteur de ligne confortable et limitez la largeur des longs paragraphes. Les unités rem suivent la taille de police racine, souvent 16px, mais celle-ci peut être modifiée par le navigateur, l’utilisateur ou la feuille CSS.
body { font-family: system-ui, sans-serif; line-height: 1.7; }
article { max-width: 65ch; margin-inline: auto; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; }02Espacements intérieurs et extérieurs
Le padding est l’espace à l’intérieur de la bordure ; le margin, celui à l’extérieur. Avec border-box, la largeur déclarée inclut le padding et les bordures.
*, *::before, *::after { box-sizing: border-box; }
.card { width: 300px; padding: 24px; border: 1px solid; }03Utiliser une échelle d’espacement
Réutiliser quelques valeurs d’espacement rend la page cohérente. Pas besoin d’une marge différente pour chaque élément : commencez avec une petite échelle et ajustez consciemment.
:root { --space-1: 8px; --space-2: 16px; --space-3: 24px; }
.card { padding: var(--space-3); }
.card p { margin-block: var(--space-2); }04À vous de jouer
Essayez un padding de 8px, puis de 40px, sans changer la largeur de la carte.
HTML et CSS uniquement. Les scripts et l’envoi des formulaires sont désactivés.
Pour aller plus loin
Consultez les guides MDN et standard HTML Living Standard pour approfondir et connaître les bonnes pratiques des navigateurs actuels.